A two-language architecture studio site on Next.js: Thai first with English at /en, the project photography leading, and every animation rebuilt in GSAP.
Architecture studioWeb design / Development / Thai + English
Client
Optik
Industry
Architecture studio
Scope
Web design / Development / Thai + English
The pages
Colour palette
Typefaces
Headings
Body text
HeadingsThai
Body textThai
The job in numbers
2
languages, Thai first and English at /en
6
sections, from the home page to contact
4
typefaces, two of them for Thai
1440 + 390
screen widths, in pixels, where every section was checked against the original design
01
A studio that lets the work speak
Optik is the site of a studio that designs homes and offices, the kind of practice that sells with pictures of finished buildings. The client chose the Optik design, which started as a Webflow template, and wanted every part of it kept, layout, pictures and motion, but rebuilt in Next.js and Thai first.
The site has six parts, the home page, about, services, portfolio, journal and contact, every one of them in Thai and English.
02
Black, white and big pictures
The design keeps to black, white and three greys, so the houses and buildings carry all the colour. The studio name runs the full width of the screen over the house on the home page, and the rest of the words stay few and short.
Phudu sets the Latin headings and Urbanist the body. For Thai we added Kanit to the heading stack and Noto Sans Thai to the body stack, so every Thai letter appears in a Thai face chosen to sit beside them, never in whatever the device falls back to.
03
Thai first, then English
Every page opens in Thai at its plain URL, with English at /en and a ไทย / EN switch at the top. The Thai is written to read naturally rather than translated word for word; brand names, people’s names and email addresses stay in English, and the journal dates use the Thai Buddhist year.
The Thai and English pages share the same page code, and every Thai line lives in one file, paired with its English sentence, so any copy change is easy to find. How we build Thai and English sites for businesses is on our company website page.
04
The original motion, in GSAP
Headings arrive a word at a time, the partner strip and the big sentence run as marquees, the project slider moves on its arrows, and buttons and service cards answer the pointer, all rebuilt in GSAP to the original’s timing.
The sliders and the mobile menu are small components that only run their own part of the page, and anyone whose device asks for reduced motion sees everything in its final place at once.
05
Matched section by section
We turned every page of the original into Next.js components that keep its stylesheet and class names, so the layout matches exactly, then measured where each section sits against the original at 1440 and 390 pixels wide.
Every picture loads through next/image with its real size set, so the layout doesn’t shift while images arrive, and the contact form is checked on the server with Zod and carries a hidden field that catches spam bots.
06
Both languages in plain HTML
All the text, Thai and English, arrives from the server as HTML rather than sitting inside images or waiting on a script, so Google and AI tools can read both languages from the first load.
If you run a studio or a company and want a two-language site like this, see company websites, or compare every package 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.