Gesso Grande Rocha
Sitio React con 5 rutas SEO, páginas por ciudad generadas dinámicamente y reseñas de Google en tiempo real
01
Visión General
Desarrollo del sitio de Gesso Grande Rocha — empresa especializada en drywall, cielorrasos, molduras de yeso y armarios a medida en el litoral sur de São Paulo. El proyecto priorizó un SEO local granular: además de la página de inicio, hay páginas independientes para cada ciudad de actuación (/gesso-mongagua, /gesso-itanhaem, /gesso-praia-grande), cada una con contenido único, un FAQ de 6 preguntas específico para la ciudad y su propio Schema.org LocalBusiness. Las páginas de ciudad se generan a partir de un único componente CityPage.jsx alimentado por un archivo de datos cities.js, lo que permite escalar a nuevas ciudades sin duplicar código.
Mi rol
Full-stack en solitario — diseño, desarrollo en React, arquitectura de rutas por ciudad, SEO técnico, integración de reseñas de Google (Elfsight), formulario con EmailJS y deploy en Vercel.
Categoría
Landing page
Año
2025
Estado
02
El Problema
La empresa operaba sin presencia digital y perdía clientes frente a competidores que sí se encuentran en Google. El desafío técnico era crear páginas por ciudad con contenido único y SEO específico — sin usar un CMS ni backend, solo un sitio estático en React.
03 — La Solución
SPA React con React Router y arquitectura de datos centralizada: un componente CityPage reutilizable consume los datos de cities.js para generar páginas únicas por ciudad, cada una con metadata específica mediante react-helmet-async, FAQ en acordeón, listado de barrios atendidos, servicios detallados y Schema.org. Reseñas de Google integradas con el widget de Elfsight — actualizadas en tiempo real sin mantenimiento manual.
04
Funcionalidades Principales
Páginas por Ciudad con SEO Local
Rutas /gesso-mongagua, /gesso-itanhaem y /gesso-praia-grande con contenido único, URL canónica, FAQ de 6 preguntas específico por ciudad y lista de barrios atendidos — generadas dinámicamente por un único componente + un archivo de datos.
Reseñas de Google en Tiempo Real
Widget de Elfsight integrado que importa las valoraciones directamente desde el Google Maps de la empresa, actualizadas automáticamente — sin testimonios falsos y sin mantenimiento manual de contenido.
Schema.org LocalBusiness
JSON-LD completo con la dirección real (R. Monsenhor Seckler, 771, Mongaguá), geolocalización, teléfono, horario, redes sociales, areaServed y hasOfferCatalog con los 6 servicios — inyectado en todas las páginas mediante SEOHead.
Galería de Obras con Lightbox
Más de 7 obras reales en formato WebP que se abren en un lightbox (AnimatePresence + Framer Motion) — prueba social visual para nuevos clientes.
6 Servicios con Presentación Animada
Cuadrícula de servicios con stagger animation (Framer Motion whileInView): Drywall, Cielorrasos y Molduras, Armarios a Medida, Revestimientos Decorativos, Divisiones Corporativas y Remodelaciones.
Formulario con EmailJS
Formulario de contacto funcional sin backend — los mensajes se envían directamente con EmailJS, sin necesidad de servidor ni de una API propia.
05
Tecnologías
Front-end
Despliegue
Integraciones
Bibliotecas
06
Decisiones de Diseño
Paleta naranja/terracota (#C75B17, #E67E22) sobre fondo oscuro (#1C1C1C) en el hero, invirtiéndose a claro en las secciones de contenido — crea un contraste fuerte y una identidad distinta para un sector (la construcción) que suele usar azul y gris. Un slideshow automático de 3 fotos del equipo real en la sección Sobre nosotros refuerza la credibilidad de la empresa local.
07
Desafíos Técnicos
Generar páginas con SEO único por ciudad en una SPA React sin SSR: la solución fue react-helmet-async para inyectar metadata distinta por ruta y vercel.json con rewrites para que Googlebot encuentre cada URL como una página independiente. El componente CityPage lee el citySlug de la ruta, busca los datos en cities.js y renderiza contenido 100% único — incluido el FAQ, los barrios y los servicios detallados — sin duplicación de plantilla.
08
Resultados
- Empresa encontrable en Google para búsquedas locales de drywall en 3 ciudades del litoral paulista
- 3 páginas de ciudad con SEO independiente generadas a partir de un único componente React
- Reseñas de Google importadas en tiempo real mediante Elfsight — ningún testimonio escrito a mano
09
Aprendizajes
- Arquitectura de datos para SEO local: centralizar el contenido de varias páginas en un archivo cities.js permite escalar a nuevas ciudades sin duplicar código ni componentes
- React Router en una SPA para SEO: configurar vercel.json con rewrites garantiza que todas las rutas (/, /gesso-mongagua, /galeria) respondan correctamente a Googlebot sin SSR
- Elfsight como alternativa práctica a la Google Places API: un widget que importa reseñas de Google Maps sin necesitar clave de API ni procesamiento del lado del servidor
- react-helmet-async para metadata por ruta en una SPA: inyectar title, description, canonical y JSON-LD distintos en cada página sin un framework SSR
¿Te gustó este proyecto?
¿Tienes una idea parecida o quieres construir algo diferente? Hablemos.
Otros proyectos
Ver todos
Vista previa en videoSaaS
Vendaí
Sistema completo de punto de venta para pet shops, tiendas de alimento para animales, almacenes y comercios de barrio: POS con lector de código de barras, caja, inventario, fiado (venta a crédito), cuentas por pagar, PIX (el sistema de pagos instantáneos de Brasil), más de 50 informes y Recepción Segura — todo funcionando sin internet, con sincronización a la nube y una app de gestión en el celular.
Vista previa en videoSistema web
EA Central
Tienda B2B de accesorios para celulares: catálogo con 349 productos y filtro por dispositivo (293 modelos), precio progresivo por cantidad, carrito con elección de colores, flete real y un checkout que abre WhatsApp con el pedido listo. Panel completo para el comerciante, exportación a Excel/PDF y medición con Meta Pixel + Conversions API.
Vista previa en videoSaaS
Petzara
Sistema completo de gestión para petshops: agenda con estado en tiempo real mediante Socket.io, clientes, mascotas, finanzas, colaboradores y suscripción mensual/anual con Stripe — PWA instalable en el celular o en la computadora.