--- title: "Marti China" description: "Unternehmensseite für die China-Tochter eines Schweizer Tunnelbau-Zulieferers. Next.js vorne, selbst gehostetes Strapi dahinter: 49 Produktseiten, 17 Referenzprojekte, zwei Sprachen." url: https://riteshkc.com.np/de/work/marti-china source: https://riteshkc.com.np/de/work/marti-china.md updated: 2026-07-01 site: "Ritesh KC" --- # Marti China Zweisprachige Unternehmensseite mit 49 Produktseiten auf Next.js und Strapi - Year: 2026 - Role: Full-Stack-Entwickler - Duration: 2 Monate - Stack: Next.js, React, TypeScript, Tailwind CSS, Strapi, Baidu Maps - Live: https://marti.wecreatelabs.com.hk/ ## Summary Unternehmensseite für die China-Tochter eines Schweizer Tunnelbau-Zulieferers. Next.js vorne, selbst gehostetes Strapi dahinter: 49 Produktseiten, 17 Referenzprojekte, zwei Sprachen. ## Problem Marti China brauchte eine Seite, die das eigene Team in Zhongshan pflegen kann — Produktkatalog, Referenzprojekte und Leistungsseiten, auf Englisch und Chinesisch, ohne Entwickler. ## Outcome Eine Next.js-Seite über selbst gehostetem Strapi. Das Team legt ein Produkt, ein Projekt oder eine Leistung an, und die Seite existiert. Die Projektkarte läuft auf Baidu und lädt in Festlandchina. Marti China fertigt die Bauteile, die Ausbruchmaterial aus einem Tunnel heraustransportieren. Der Leser ist ein Bauleiter oder ein Einkäufer, meist mitten im Projekt, meist auf der Suche nach einer Spezifikation und einer Referenz, bevor er jemanden anschreibt. Für diesen Leser ist die Seite gebaut: was die Bauteile sind, was das Unternehmen darum herum leistet, wo die Teile bereits laufen, und ein Formular, das nach Gurtbreite fragt statt nach einer Nachricht. Neun Seiten-Templates decken das ab — Startseite, Über uns, Qualität und Nachhaltigkeit, Leistungen und je eine Seite pro Leistung, Projekte, Katalog und je eine Seite pro Produkt, Kontakt. Jedes Wort auf jeder davon ist ein Feld in Strapi, in zwei Sprachen, damit das Team in Zhongshan das fünfzigste Produkt ohne mich anlegt. > Screenshot (marti cms): Das Strapi-Backend von Marti China: zuletzt bearbeitete und zuletzt veröffentlichte Einträge, das Admin-Profil und ein Zähler mit 86 Einträgen. — Die Startseite des Strapi-Admins. Die letzten Bearbeitungen sind die des Kunden. Sechsundachtzig veröffentlichte Einträge stehen hinter der Seite, und die vier zuletzt bearbeiteten sind eine Seite und drei Produkte. Das ist der ganze Test dieses Baus: Die jüngste Aktivität ist die des Kunden, nicht meine. > Screenshot (delivery model): Abschnitt The Marti China Delivery Model mit vier Bildkacheln für Engineering, Fertigung, Baustellenbetreuung und Qualitätskontrolle. — Vier Leistungen, vier Kacheln, vier Seiten. Die Kacheln sind Einträge, kein Layout. Vier Leistungen, vier Seiten, ein Template. Jede trägt ihren eigenen Ablauf, ihre eigenen Ergebnisse und den Teil des Geschäfts, in dem sie sitzt — und genau das verhindert, dass vier Seiten aus einer Datei wie vier Kopien derselben Seite wirken. > Screenshot (services grid): Leistungsseite mit vier Bildkacheln: Engineering und Beratung, Fertigung, Baustellenbetreuung, Qualitätskontrolle. Das hält bis zur Handybreite, wo die Kategorieleiste über eine einspaltige Liste klappt und die Projektkarte ihr Listen-Panel behält, statt es zu verlieren. Warum Strapi und kein gehostetes CMS, warum die Karte auf Baidu läuft und wie zwei Sprachen auf einem Content-Modell sitzen, steht in der Case Study. ## Screens ### Strapi - Das Strapi-Backend von Marti China: zuletzt bearbeitete und zuletzt veröffentlichte Einträge, das Admin-Profil und ein Zähler mit 86 Einträgen. — Die Startseite des Strapi-Admins. Die letzten Bearbeitungen sind die des Kunden. ### Home - Startseite von Marti China über einem Foto einer Besprechung, mit der Zeile Swiss Engineering Excellence und einem Button Explore Services. - Abschnitt The Marti China Delivery Model mit vier Bildkacheln für Engineering, Fertigung, Baustellenbetreuung und Qualitätskontrolle. — Vier Leistungen, vier Kacheln, vier Seiten. Die Kacheln sind Einträge, kein Layout. - Produktabschnitt der Startseite mit fünf Kategorie-Tabs über drei Produktkacheln für Trag-, Rücklauf- und Aufprallrollen. — Die fünf Tabs sind die fünf Kategorien in Strapi. Eine sechste ergibt einen sechsten Tab. ### Catalogue - Produktseite: links eine mitlaufende Leiste mit fünf Kategorien, rechts das Raster der Tragrollen und ein Button zum Datenblatt-Download. — Fünf Kategorien, 49 Produkte, ein Template. Die Leiste ist ein Anker je Kategorie. - Produktseite Carrying Idlers: links eine nummerierte Bildspalte, rechts Kategorie, Name und Beschreibung. — Die 49. Produktseite und die erste sind dieselbe Datei. ### Projects - Projektseite: eine Baidu-Karte von Europa mit chinesischer Beschriftung, darüber ein Panel mit Referenzprojekten nach Land und Jahr. — Baidu statt Google. Die Leser sitzen zuerst in Festlandchina. - Dieselbe Karte nach Auswahl der Referenz Follo Line: die Karte ist nach Norwegen geschwenkt, die Zeile in der Liste ist hervorgehoben. — Eine Referenz auswählen schwenkt die Karte. Liste und Karte sind eine Auswahl. ### Services - Leistungsseite mit vier Bildkacheln: Engineering und Beratung, Fertigung, Baustellenbetreuung, Qualitätskontrolle. - Seite Engineering und Beratung: ein blaues Band The Engineering Process mit vier nummerierten Schritten und je einer Zeitangabe. — Jede der vier Leistungen hat eine eigene Seite auf diesem Template. - Abschnitt Engineering Deliverables mit 3D-Systemmodell, 2D-Layout- und Fertigungszeichnungen, Statik und Stückliste. ### Quality - Abschnitt Quality Inspection: vier nummerierte Karten über einem Foto zweier Prüfer, von Wareneingang bis Prüfbericht. - Sicherheitsabschnitt A Safe Facility, A Skilled Team mit Karten zu Arbeitssicherheit, Schulung, Werkschutz, Vertraulichkeit und Notfallvorsorge. ### About - Zeitleiste der Unternehmensgeschichte: links die Jahre von 1922 bis 2023, das gewählte Jahr 2007 groß daneben, rechts ein Foto dreier Fahnen. — Die Zeitleiste läuft mit dem Scrollen weiter. Jedes Jahr ist ein Eintrag mit Foto. - Faktenblock der Über-uns-Seite: Marti Group 1922 gegründet, über 80 Unternehmen, über 100 Jahre Engineering, China seit 2011 in Zhongshan. ### Contact - Kontaktseite: links E-Mail und Telefon, rechts ein technisches Anfrageformular nach Name, Firma, E-Mail, Standort, Projektart und Spezifikation. — Sechs Felder. Das letzte fragt nach Leistung, Gurtbreite, Steigung und Betriebsbedingungen. ### Details - Die geöffnete Sprachumschaltung im Header, EN ausgewählt, SC daneben. — Englisch und vereinfachtes Chinesisch, pro Feld im CMS statt pro Seite. - Die 404-Seite der Website: die Ziffern 404, die Zeile Page Not Found und ein Button zurück zur Startseite. ### Mobile - Die Projektseite in Handybreite: das Hero-Foto einer Förderanlage, darunter beginnt die Karte. - Die Produktseite in Handybreite, die Kategorieleiste zusammengeklappt über einer einspaltigen Liste von Produktkacheln. ## Case study Wer pflegt die Seite, wenn ich weg bin — und welche Karte lädt in China: https://riteshkc.com.np/de/case-studies/marti-china (markdown: https://riteshkc.com.np/de/case-studies/marti-china.md)