Gesso Grande Rocha
React site with 5 SEO routes, dynamically generated city pages and real-time Google reviews
01
Overview
Development of the Gesso Grande Rocha website — a company specializing in drywall, ceilings, coves and custom cabinets on the southern coast of São Paulo. The project prioritized granular local SEO: besides the homepage, there are independent pages for each city served (/gesso-mongagua, /gesso-itanhaem, /gesso-praia-grande), each with unique content, a city-specific 6-question FAQ and its own Schema.org LocalBusiness. The city pages are generated from a single CityPage.jsx component fed by a cities.js data file, making it possible to scale to new cities without duplicating code.
My role
Solo full-stack — design, React development, city-based route architecture, technical SEO, Google reviews integration (Elfsight), form via EmailJS and deployment on Vercel.
Category
Landing page
Year
2025
Status
02
The Problem
The company operated with no digital presence, losing customers to competitors that could be found on Google. The technical challenge was to create city pages with unique content and specific SEO — without a CMS or backend, just a static React site.
03 — The Solution
A React SPA with React Router and a centralized data architecture: a reusable CityPage component consumes data from cities.js to generate unique pages per city, each with specific metadata via react-helmet-async, an FAQ accordion, a list of neighborhoods served, detailed services and Schema.org. Google reviews integrated through the Elfsight widget — updated in real time with no manual maintenance.
04
Key Features
City Pages with Local SEO
Routes /gesso-mongagua, /gesso-itanhaem and /gesso-praia-grande with unique content, canonical URL, a city-specific 6-question FAQ and a list of neighborhoods served — dynamically generated by a single component + data file.
Real-Time Google Reviews
Integrated Elfsight widget that imports reviews directly from the company's Google Maps listing, updated automatically — no fake testimonials and no manual content maintenance.
Schema.org LocalBusiness
Complete JSON-LD with the real address (R. Monsenhor Seckler, 771, Mongaguá), geolocation, phone, opening hours, social networks, areaServed and hasOfferCatalog with the 6 services — injected into every page via SEOHead.
Project Gallery with Lightbox
7+ real projects in WebP format that open in a lightbox (AnimatePresence + Framer Motion) — visual social proof for new customers.
6 Services with Animated Presentation
Services grid with stagger animation (Framer Motion whileInView): Drywall, Ceilings and Coves, Custom Cabinets, Decorative Wall Coverings, Corporate Partitions and Renovations.
Form via EmailJS
Working contact form without a backend — messages sent directly through EmailJS, with no need for a server or an API of your own.
05
Technologies
Front-end
Deployment
Integrations
Libraries
06
Design Decisions
Orange/terracotta palette (#C75B17, #E67E22) over a dark background (#1C1C1C) in the hero, flipping to light in the content sections — it creates strong contrast and a distinct identity for an industry (construction) that usually goes with blue and gray. An automatic slideshow of 3 photos of the real team in the About section reinforces the credibility of the local business.
07
Technical Challenges
Generating pages with unique SEO per city in a React SPA without SSR: the solution was react-helmet-async to inject distinct metadata per route and vercel.json with rewrites so Googlebot finds each URL as an independent page. The CityPage component reads the citySlug from the route, fetches the data from cities.js and renders 100% unique content — including FAQ, neighborhoods and detailed services — with no template duplication.
08
Results
- Company findable on Google for local drywall searches in 3 cities on the São Paulo coast
- 3 city pages with independent SEO generated from a single React component
- Google reviews imported in real time via Elfsight — no testimonial written by hand
09
Learnings
- Data architecture for local SEO: centralizing the content of multiple pages in a cities.js file makes it possible to scale to new cities without duplicating code or components
- React Router in an SPA for SEO: configuring vercel.json with rewrites ensures that all routes (/, /gesso-mongagua, /galeria) respond correctly to Googlebot without SSR
- Elfsight as a practical alternative to the Google Places API: a widget that imports Google Maps reviews without needing an API key or server-side processing
- react-helmet-async for per-route metadata in an SPA: injecting distinct title, description, canonical and JSON-LD on each page without an SSR framework
Liked this project?
Have a similar idea or want to build something different? Let's talk.
More projects
View all
Video previewSaaS
Vendaí
A complete point-of-sale system for pet shops, feed stores, grocery stores, and neighborhood shops: POS with barcode scanner, cash register, inventory, customer tabs (fiado), accounts payable, PIX (Brazil's instant payment system), 50+ reports, and Secure Receiving — all working without internet, with cloud sync and a mobile management app.
Video previewWeb system
EA Central
B2B store for mobile phone accessories: a catalog of 349 products with filtering by device (293 models), progressive pricing by quantity, a cart with color selection, real shipping rates, and a checkout that opens WhatsApp with the order ready to send. Full admin panel for the store owner, Excel/PDF export, and Meta Pixel + Conversions API tracking.
Video previewSaaS
Petzara
A complete management system for pet shops: a schedule with real-time status via Socket.io, clients, pets, finances, team members, and monthly/annual subscriptions via Stripe — an installable PWA for phone or computer.