A roofing company home page on Next.js with everything on one page: six services, projects, reviews, FAQ and a booking form, Thai first with English at /en.
Roofing companyWeb design / Development / Thai + English
Client
Roofline
Industry
Roofing company
Scope
Web design / Development / Thai + English
The pages
Colour palette
Typefaces
Headings
Body text
HeadingsThai
Body textThai
The job in numbers
6
services, each card with a photo of roofers at work
5
kinds of interaction from the original, replayed by a small GSAP player
2
languages, Thai first and English at /en
4
typefaces, two of them for Thai
01
What a roofing customer asks
Someone looking for a roofer wants to know a few things: what you do, where you have done it, what others say, and how soon you can come. The Roofline home page runs in that order and ends on the booking form.
The client chose the Roofline design, which started as a Webflow template. The scope was one long home page with every section, plus a 404 page, rebuilt in Next.js in Thai and English; names, brands and phone numbers stay in Latin script.
02
Red, orange and black
The page opens on a gradient from black through red to orange, with the headline "Roofing built to last" beside a roofer at work. The services sit on black, every card with a photo of the job, and the rest of the page rests on white.
Onest sets the headings and Inter the body. For Thai we added Kanit and Noto Sans Thai to the font stacks, so the Thai letters sit at the same weight and height as the Latin beside them.
03
Every answer on one page
Below the opening come the experience figures, the six services, installation, repair, replacement, storm damage, commercial roofs and emergencies, then how the work runs, why choose the company, recent projects in a slider, customer reviews and an expanding FAQ.
The booking form at the end is checked on the server with Zod and carries a hidden field that catches spam bots.
04
Motion from the original’s data
The Webflow template stores all of its motion as data. We kept that data and wrote a small GSAP player that runs the same five kinds of interaction as the original: on hover, on click, on scrolling into view, on page load and on opening a menu.
The dropdown, the project slider, the tabs and the FAQ are the site’s own Next.js components, and anyone whose device asks for reduced motion sees everything in its final place at once.
05
Thai first, then English
The home page opens in Thai at its plain URL, with English at /en and a ไทย / EN switch at the top. The Thai is written the way builders and homeowners talk.
Both languages arrive from the server as HTML, so Google can read the services, projects and FAQ in each.
06
A site like this for your trade
Trade and building businesses sell with photos of real jobs and fast replies. If you build or repair homes, see construction company websites; for a company with several services, see company websites.
Every package includes the copy and the basic SEO set up before launch. Compare them on packages and prices.
Want a site like this for your business?
Tell us about your business on LINE or WhatsApp. We reply within one working day with the right package and the closest project to yours.