A manufacturer’s home page on Next.js: large headlines, counters that count up as they arrive, and service steps that move with the scroll, Thai first with English at /en.
ManufacturerWeb design / Development / Thai + English
Client
Manufactt
Industry
Manufacturer
Scope
Web design / Development / Thai + English
The pages
Colour palette
Typefaces
Headings
Body text
HeadingsThai
Body textThai
The job in numbers
3
counters that count up as they come into view
5
industries, each with its own picture card
2
languages, Thai first and English at /en
4
typefaces, two of them for Thai
01
A factory that has to look credible from the first line
Procurement teams choose a manufacturer on confidence, so the Manufactt home page opens on a large headline, "From raw material to market-ready", counters that count up as they come into view, and pictures of factory machinery, before the services, industries and case studies.
The client chose the Manufactt 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.
02
Orange on ink
The palette is ink and graphite cut with two oranges, and the key word in every heading turns orange, so the eye lands first on the word that matters most in each part of the page.
Mona Sans sets the headings and Geist the body. For Thai we added Kanit and Noto Sans Thai to the font stacks, so the Thai letters are heavy and dense enough to stand beside the bold Latin headings.
03
Services, industries, projects
The about section has three counters that count up on arrival. The industries section lists five groups, aerospace, automotive, medical equipment, energy and power, and industrial machinery; choosing one swaps the picture card beside it, with small photos floating at the edges.
Then come a case study slider that moves on its arrows, client and testimonial strips that run as marquees, and a large logo at the foot of the page.
04
Driven by the scroll
The service steps advance with the scroll, and so does the logo at the foot. We used the same GSAP player as the Roofline build, which reads the original’s own motion data, and taught it to play by how far each section has scrolled through the screen.
Anyone whose device asks for reduced motion sees everything in its final place at once, and the forms are checked on the server with Zod and carry a hidden field that catches spam bots.
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 main button at the top right asks for a quote, the first thing a purchasing team looks for.
Both languages arrive from the server as HTML, so Google reads the services, industries and case studies without waiting on a script.
06
A site like this for your factory
A factory site that sells has to answer the purchasing team in full: what you make, who you have made it for, and how to ask for a price. How we build these is on our factory websites page, and a live factory site we redesigned is in the CDV Thailand case study.
For a company with several services that each need their own page, see company websites.
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.