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
Cliente Real02
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 — 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
Demonstração
07
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.
08
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.
09
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
10
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.