--- title: "Marti China" description: "A corporate site for the China arm of a Swiss tunnelling supplier. Next.js on the front, self-hosted Strapi behind it: 49 product pages, 17 project references, two languages." url: https://riteshkc.com.np/work/marti-china source: https://riteshkc.com.np/work/marti-china.md updated: 2026-07-01 site: "Ritesh KC" --- # Marti China Bilingual corporate site and 49-page product catalogue on Next.js and Strapi - Year: 2026 - Role: Full-stack developer - Duration: 2 months - Stack: Next.js, React, TypeScript, Tailwind CSS, Strapi, Baidu Maps - Live: https://marti.wecreatelabs.com.hk/ ## Summary A corporate site for the China arm of a Swiss tunnelling supplier. Next.js on the front, self-hosted Strapi behind it: 49 product pages, 17 project references, two languages. ## Problem Marti China needed a site its own staff in Zhongshan could keep current — a product catalogue, project references and service pages, in English and Chinese, with no developer in the loop. ## Outcome A Next.js site over self-hosted Strapi. Staff add a product, a project or a service and the page exists. The project map runs on Baidu, so it loads inside mainland China. Marti China makes the components that move excavated rock out of a tunnel. The reader is a contractor's engineer or a procurement lead, usually mid-project, usually after a specification and a reference before they email anyone. The site is built for that reader: what the parts are, what the company does around them, where the parts already run, and a form that asks for belt width rather than for a message. Nine page templates cover it — home, about, quality and sustainability, services and a page per service, projects, the catalogue and a page per product, contact. Every word on every one of them is a field in Strapi, in two languages, so the team in Zhongshan adds the fiftieth product without me. > Screenshot (marti cms): Marti China Strapi CMS — Strapi Home Page Eighty-six published entries behind the site, and the last four edited are a page and three products. That is the whole test of this build: the recent activity is the client's, not mine. > Screenshot (delivery model): Home page section titled The Marti China Delivery Model, four photographic cards for engineering, manufacturing, site support and quality control. — Four services, four cards, four pages. The cards are entries, not layout. Four services, four pages, one template. Each carries its own process, its own deliverables and the part of the business it sits in, which is what keeps four pages built from one file from reading as four copies of a page. > Screenshot (services grid): Services page showing four photographic cards: engineering and consultancy, advanced manufacturing, construction and site support, quality control. It holds down to phone width, where the category rail collapses above a single column and the project map keeps its list panel rather than losing it. Why Strapi rather than a hosted CMS, why the map is Baidu, and how two languages sit on one content model are in the case study. ## Screens ### Strapi - Marti China Strapi CMS — Strapi Home Page ### Home - Marti China home page over a photograph of an engineering meeting, with the headline Swiss Engineering Excellence and an Explore Services button. - Home page section titled The Marti China Delivery Model, four photographic cards for engineering, manufacturing, site support and quality control. — Four services, four cards, four pages. The cards are entries, not layout. - Home page product section with five category tabs above three product cards for carrying, return and impact idlers. — The five tabs are the five categories in Strapi. Adding a sixth adds a tab. ### Catalogue - Products page: a sticky rail of five categories on the left, the idler rollers grid on the right, and a download all datasheet button. — Five categories, forty-nine products, one template. The rail is an anchor per category. - Carrying idlers product page: a numbered image column on the left, the category label, name and description on the right. — The forty-ninth product page and the first one are the same file. ### Projects - Projects page: a Baidu map of Europe with Chinese labels, a floating panel listing tunnelling references by country and year. — Baidu, not Google. The primary reader is inside mainland China. - The same map after picking the Follo Line reference: the map has panned to Norway and the list row is highlighted. — Picking a reference pans the map. The list and the map are one selection. ### Services - Services page showing four photographic cards: engineering and consultancy, advanced manufacturing, construction and site support, quality control. - The engineering and consultancy page: a blue band titled The Engineering Process with four numbered steps and a timing note under each. — Each of the four services has its own page on this template. - Engineering deliverables section listing 3D system model, 2D layout and production drawings, structural calculations and bill of materials. ### Quality - Quality inspection section: four numbered cards over a photograph of two inspectors, covering receipt checks, in-process controls, verification and the report. - Safety section titled A Safe Facility, A Skilled Team, with cards for workplace safety, training, facility security, confidentiality and emergency preparedness. ### About - About page history timeline: years down the left from 1922 to 2023, the selected year 2007 enlarged beside a photograph of Marti, Swiss and Chinese flags. — The timeline advances with the scroll. Each year is an entry with a photograph. - About page fact block: the Marti Group founded 1922, over 80 companies, over 100 years of engineering, China established 2011 in Zhongshan. ### Contact - Contact page: email and phone on the left, a technical inquiry form on the right asking for name, company, email, project location, type and specification. — Six fields. The last one asks for capacity, belt width, incline and operating conditions. ### Details - The header's language control open, showing EN selected and SC beside it. — English and simplified Chinese, per field in the CMS rather than per site. - The site's 404 page: the numerals 404, the line Page Not Found, and a Back to Home Page button. ### Mobile - The projects page at phone width: the hero photograph of a conveyor installation with the map beginning below it. - The products page at phone width, the category rail collapsed above a single column of product cards. ## Case study Who edits it after I leave, and which map loads in China: https://riteshkc.com.np/case-studies/marti-china (markdown: https://riteshkc.com.np/case-studies/marti-china.md)