Gesso Grande Rocha
Site React com 5 rotas SEO, páginas por cidade geradas dinamicamente e reviews Google em tempo real
01
Visão Geral
Desenvolvimento do site da Gesso Grande Rocha — empresa especializada em drywall, forros, sancas e armários sob medida no litoral sul de São Paulo. O projeto priorizou SEO local granular: além da homepage, há páginas independentes para cada cidade de atuação (/gesso-mongagua, /gesso-itanhaem, /gesso-praia-grande), cada uma com conteúdo único, FAQ de 6 perguntas específico para a cidade e Schema.org LocalBusiness próprio. As páginas de cidade são geradas a partir de um único componente CityPage.jsx alimentado por um arquivo de dados cities.js, permitindo escalar para novas cidades sem duplicar código.
Meu papel
Full-stack solo — design, desenvolvimento React, arquitetura de rotas por cidade, SEO técnico, integração de reviews Google (Elfsight), formulário via EmailJS e deploy na Vercel.
Categoria
Landing Page
Ano
2025
Status
02
O Problema
A empresa operava sem presença digital, perdendo clientes para concorrentes encontráveis no Google. O desafio técnico era criar páginas por cidade com conteúdo único e SEO específico — sem usar um CMS ou backend, apenas um site estático React.
03 — A Solução
SPA React com React Router e arquitetura de dados centralizada: um componente CityPage reutilizável consome dados de cities.js para gerar páginas únicas por cidade, cada uma com metadata específica via react-helmet-async, FAQ accordion, listagem de bairros atendidos, serviços detalhados e Schema.org. Reviews Google integrados via widget Elfsight — atualizados em tempo real sem manutenção manual.
04
Funcionalidades Principais
Páginas por Cidade com SEO Local
Rotas /gesso-mongagua, /gesso-itanhaem e /gesso-praia-grande com conteúdo único, canonical URL, FAQ de 6 perguntas específico por cidade e lista de bairros atendidos — geradas dinamicamente por um único componente + arquivo de dados.
Reviews Google em Tempo Real
Widget Elfsight integrado que importa avaliações diretamente do Google Maps da empresa, atualizadas automaticamente — sem depoimentos falsos e sem manutenção manual de conteúdo.
Schema.org LocalBusiness
JSON-LD completo com endereço real (R. Monsenhor Seckler, 771, Mongaguá), geolocalização, telefone, horário, redes sociais, areaServed e hasOfferCatalog com os 6 serviços — injetado em todas as páginas via SEOHead.
Galeria de Obras com Lightbox
7+ obras reais em formato WebP com abertura em lightbox (AnimatePresence + Framer Motion) — prova social visual para novos clientes.
6 Serviços com Apresentação Animada
Grid de serviços com stagger animation (Framer Motion whileInView): Drywall, Forros e Sancas, Armários Sob Medida, Revestimentos Decorativos, Divisórias Corporativas e Reformas.
Formulário via EmailJS
Formulário de contato funcional sem backend — mensagens enviadas diretamente por EmailJS, sem necessidade de servidor ou API própria.
05
Tecnologias
Front-end
Deploy
Integrações
Bibliotecas
06
Decisões de Design
Paleta laranja/terracotta (#C75B17, #E67E22) sobre fundo escuro (#1C1C1C) no hero, invertendo para claro nas seções de conteúdo — cria contraste forte e identidade distinta para um segmento (construção civil) que costuma usar azul e cinza. Slideshow automático de 3 fotos da equipe real na seção Sobre reforça a credibilidade da empresa local.
07
Desafios Técnicos
Gerar páginas com SEO único por cidade em uma SPA React sem SSR: a solução foi react-helmet-async para injetar metadata distinta por rota e vercel.json com rewrites para que o Googlebot encontre cada URL como uma página independente. O componente CityPage lê o citySlug da rota, busca os dados em cities.js e renderiza conteúdo 100% único — incluindo FAQ, bairros e serviços detalhados — sem duplicação de template.
08
Resultados
- Empresa encontrável no Google para buscas locais de drywall em 3 cidades do litoral paulista
- 3 páginas de cidade com SEO independente geradas a partir de um único componente React
- Reviews Google importadas em tempo real via Elfsight — nenhum depoimento escrito manualmente
09
Aprendizados
- Arquitetura de dados para SEO local: centralizar conteúdo de múltiplas páginas em um arquivo cities.js permite escalar para novas cidades sem duplicar código nem componente
- React Router em SPA para SEO: configurar vercel.json com rewrites garante que todas as rotas (/, /gesso-mongagua, /galeria) respondam corretamente ao Googlebot sem SSR
- Elfsight como alternativa prática a Google Places API: widget que importa reviews do Google Maps sem precisar de chave de API ou processamento server-side
- react-helmet-async para metadata por rota em SPA: injetar title, description, canonical e JSON-LD distintos em cada página sem framework SSR
Gostou desse projeto?
Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.
Outros projetos
Ver todos
Prévia em vídeoSaaS
Vendaí
Sistema completo de ponto de venda para petshops, casas de ração, mercearias e lojas de bairro: PDV com leitor de código de barras, caixa, estoque, fiado, contas a pagar, PIX, 50+ relatórios e Recebimento Seguro — tudo funcionando sem internet, com sincronização para a nuvem e app de gestão no celular.
Prévia em vídeoSistema Web
EA Central
Loja B2B de acessórios para celular: catálogo com 349 produtos e filtro por aparelho (293 modelos), preço progressivo por quantidade, carrinho com escolha de cores, frete real e checkout que abre o WhatsApp com o pedido pronto. Painel completo para o lojista, exportação Excel/PDF e medição Meta Pixel + Conversions API.
Prévia em vídeoSaaS
Petzara
Sistema completo de gestão para petshops: agenda com status em tempo real via Socket.io, clientes, pets, financeiro, colaboradores e assinatura mensal/anual via Stripe — PWA instalável no celular ou computador.