
2026 · End-to-end design & development · Xpandex
Jogas Obras y Proyectos
Full home renovations in Madrid, built around the quote request
- React 19
- TypeScript
- Vite 8
- Tailwind CSS 3
- Framer Motion
- Conversion
- Free quote
- Area
- Madrid
- Bundler
- Vite 8
Inside the site
Screenshots of the live site, at 1440px and 375px.

Desktop · 1440px

Mobile · 375px

Desktop · 1440px

Mobile · 375px

Desktop · 1440px

Mobile · 375px
Context
A full-service renovation company working the Vara de Rey and Arganzuela districts of Madrid: plumbing, electrics, tiling, façades, roofing and interiors.
Renovation work is nearly always decided on the quote. The site doesn’t need to tell the company’s story: it needs to get someone to leave their phone number.
Approach
- One conversion, repeated. “Request a quote” sits in the top bar, in the hero, at the end of every service block and in the footer. There’s no second call to action competing for attention.
- Brand red over real site photography — the headline breaks so that “done right first time” lands in red. That’s the renovation customer’s main objection, and it’s worth answering on the first screen.
- React 19 on Vite with strict TypeScript and a feature-first structure: each section of the landing lives in its own folder, with its data kept apart.
- Per-route SEO with react-helmet-async: each page has its own title, description and Open Graph.
- Prerender on publish and real 404s. As an SPA, every route served the same 31-word HTML and any made-up URL answered 200 with the home page. Now a script opens each route in Chromium after the build and saves the rendered HTML (if a page comes out under 80 words, publishing stops), and the server returns 404 for anything that doesn’t exist.
- Framer Motion for scroll reveals, kept restrained.
- Three trust signals under the button — qualified professionals, competitive pricing, durable solutions.
What I built
- React application with client-side routing and strict TypeScript
- Tailwind design system with the brand palette
- Service structure by trade speciality
- Quote request form with validation
- Per-route SEO via react-helmet-async with Open Graph metadata
- Prerender of the five routes and real 404s on the server
- Static build deployed to production
Outcome
Live on its own domain. Later it gained prerendering and real 404s without rewriting the app: the HTML arrives with its content and the site is still the same SPA.
A note on this work
Built at Xpandex, where I run the full cycle: design, development, performance, accessibility, technical SEO and deployment.
In short
- What is Jogas Obras y Proyectos?
- A React site for a renovation company. One single conversion — request a quote — repeated at every point of the journey, with every route prerendered so the HTML arrives with its content.
- What is Jogas Obras y Proyectos built with?
- Jogas Obras y Proyectos is built with React 19, TypeScript, Vite 8, Tailwind CSS 3 and Framer Motion. Carlos Ponce delivered it in 2026 — End-to-end design & development · Xpandex.
- What stands out in Jogas Obras y Proyectos?
- Conversion: Free quote. Area: Madrid. Bundler: Vite 8.
- Is Jogas Obras y Proyectos live?
- Yes. Jogas Obras y Proyectos has been live at jogasreformas.com since 2026.
Related work
Something similar in mind?
