Promats is a brand that manufactures universal PVC car mat ranges. Its audience includes dealers and retailers in Turkey as well as distributors abroad. The website's job is to present the product ranges clearly, show the strength of the manufacturing side and bring visitors to a quote request with the right product attached. promats.com.tr is built on the same infrastructure as Paspas ERP, the system that runs the company's production, so web content and incoming requests are managed from the same place.

Context and requirements

Promats' previous web content lived in an off-the-shelf CMS. Product images, product features and page copy were stored in different formats; the site worked, but the client's team found it hard to edit. At the same time, the brand was repositioning from vehicle-specific mats to universal mat ranges. That shift meant rewriting the home, products and production pages in Turkish and English based on a content brief prepared by the client.

The brief covered three things: move the existing content to a modern Next.js site without losing anything, connect quote requests directly to the company's sales process, and give the content team a panel they could use to update pages without a developer.

Solution and scope

Home page

The home page opens with a hero slider where every slide has its own headline, copy and button, covering design, production and durability in turn. Below it sit a carousel of product ranges, an introduction to the products and a "Why Promats" section whose badge bar uses custom-drawn icons.

Products and product detail

The products page lists 20 mat ranges, including Orbital, Maximum, Star Plus, Icon, Pars, Professional, Premium, Extra Plus, New Generation and their chrome variants. Each range card highlights its key feature with badges positioned so they never cover the image. Range detail pages combine the image area, dimensions and an accordion that opens in this order: Description, Technical Specifications, 5-Piece Full Set, Cleaning and Care, Advantages, Material, Universal Fit and FAQ. A "Get Information" block at the end leads to the quote form.

Production, company and content pages

The production page walks through the manufacturing process, product and material development, mould engineering, quality control and shipping, with headings and a gallery. The About page covers corporate identity, working principles and the ISO 9001:2015 badge. On the English side there are OEM Manufacturing and Become a Partner pages for international buyers, plus Resources (technical articles), Blog, FAQ, search and the privacy, data protection, cookie and terms pages.

Quotes and contact

The contact form works in two modes. In quote mode, visitors select one or more ranges and the request lands directly in the ERP's quotation module as a request record; the sales team can turn it into a quote without copying it into another system. General contact messages create a panel notification and an instant-message alert. The OEM page has its own contact form. Quote submissions and successful submissions are tracked as separate analytics events.

Admin panel

Web content is managed in the Website screen of the ERP panel. After the first delivery we identified the fields the content team could not edit in practice, and rebuilt the screen around them:

• Slider and Why Promats forms: headline, copy and button are entered in separate fields; the HTML the site expects is generated from them, and a test confirms the output is byte-for-byte identical to existing records.
• Page content: field-based forms for the Products, Production and About pages instead of raw JSON, which now sits only in an "Advanced" section.
• Rich text editor: content pasted from Word is stripped of stray styles and classes, only allowed tags are kept and unsafe links are blocked.
• Product form: around 30 content fields, SEO fields and publication status, plus a Features tab that edits the 297 product feature records (type, text, image, order).
• Gallery, menu, static texts, articles and theme editors.
• Publication and indexability badges: the list shows whether each product is live and, based on its SEO score, ready to be indexed.

Every save in the panel regenerates the affected pages, so changes go live without waiting for a deploy.

Technical architecture

The site is built with Next.js, React and TypeScript. The API runs as a separate web module inside the same Bun and Fastify backend as the ERP; data is stored in MySQL in dedicated tables for products, product features, special pages, page galleries, home sections, menus, static texts, articles and languages. Public endpoints are read-only; admin endpoints require authentication and admin rights.

Turkish and English content is tied to a language record and URLs are localised per language (for example /tr/uretim and /en/production). The sitemap generates every page, range and article URL in both languages. The different image path formats inherited from the old CMS were normalised by a single rule in the API, backed by regression tests. Content updates were applied through traceable scripts with a backup taken beforehand, not by hand in the panel.

Integrations

The product catalogue is exposed to TeklifRota, a quotation tool, through a versioned product contract; range names, images and descriptions flow from this endpoint into quote documents. Quote requests are connected to the ERP's quotation and customer modules, and contact messages to panel notifications.

Outcome

promats.com.tr now presents 20 universal mat ranges in Turkish and English, together with the production and quality story. Two rounds of client revisions were worked through point by point from the content brief and screenshots and taken live. Page copy, sliders, product features and galleries are edited in the panel, and incoming quote requests are handled inside the same ERP that runs production.