Web development

Top Laser · Industrial B2B Catalogue

A CNC and laser machinery supplier selling into Egypt, Saudi Arabia and the UAE. 132 models carrying their full technical specifications across six industrial sectors, in Arabic and English, for a buyer who compares for weeks before spending.

132

machine models, each with its own page in two languages

Client: Top Laser
Industry: Industrial machinery, CNC and laser

toplaser-eg.comOpen the site

toplaser-eg.com/

The challenge

A CNC machine is a decision taken over weeks and for a large sum, and the buyer is comparing specifications rather than photographs.
132 models spread across six industrial sectors that have nothing to do with each other. Somebody working in gold is not going to browse sheet-metal cutters.
Selling into three markets in two languages, where the Saudi and Emirati searcher uses different phrasing from the Egyptian one.

What we did

A page per model with its full specification, in Arabic and English, each version on its own URL.
The catalogue filters by industrial sector rather than by laser type, so a visitor filters by their trade instead of by a term.
Maintenance, spare parts and training pages, because those are after-sales questions asked before the sale.

What came of it

A buyer now reaches their machine through their own trade rather than through a laser type: a gold workshop enters at the gold sector, a steel fabricator at the metals sector.
132 models with their specifications written down (working area, power, speeds, head, applications and warranty) instead of contact us for details.
The after-sales questions (maintenance, spare parts, training) got real pages, because they are asked before the purchase rather than after it.

Project snapshot

How big a job this was

Large. 132 models with their specifications, six industrial sectors, two complete languages rather than a translated menu, and a search-facing content layer written for three national markets. That is the size of a store, not of a brochure site.

Project size: Large
Type of site: A bilingual B2B product catalogue
Who it speaks to: Factory and workshop owners, goldsmiths and sign makers, in Egypt, Saudi Arabia and the UAE. A technical buyer who compares specifications for weeks, and who asks about servicing and spare parts before asking the price.
Built on: Next.js · Cloudflare · custom admin

132
Arabic model pages
each with its English counterpart
6
industrial sectors
Metals, gold, laser welding, non-metallic, surface engraving, signage
2
complete languages
Arabic and English, each page with its own version and URL
3
markets with a local contact number
Egypt, Saudi Arabia and the UAE

Scope delivered

Strategy and catalogue taxonomy
Bilingual information architecture
UX and interface design
A Next.js build with a product dashboard
Technical SEO foundations and a search dashboard
Structuring the buyer's-guide content

Technologies

Next.jsThe whole site, with pages rendered on the server
ReactThe interface components
CloudflareContent delivery and certificates
next/imageServing images in modern formats at fitting sizes
Custom adminAdding and editing models and articles
SEO dashboardWatching titles, descriptions and indexing

The client

Whose site this is

Top Laser supplies and services CNC and laser machinery: fibre and CO2 machines for cutting and engraving, laser welders, plasma cutters, routers, DTF printers, and hydraulic shears and brakes. The company operates across Egypt, Saudi Arabia and the UAE (branches and warehousing in Cairo, Jeddah, Dammam, Riyadh and Ajman) with a one-year warranty, servicing, spare parts and operator training.

That makes the company more than a machine seller. It is an uptime partner: a factory spending six figures is not buying steel, it is buying the machine staying up, and somebody answering when it does not.

The buying cycle here is long and it happens entirely before any call. The buyer compares models, reads specifications, asks about spares and servicing, and compares prices across three countries. All of it on the site. By the time they pick up the phone they have usually narrowed it to two machines. A site that does not give the full specification gets dropped from that shortlist early, and never finds out it was dropped.

Where it started

What the site was stalling on

The trouble with machinery sites is that they are built like a printed brochure: attractive photographs of the machine, two lines of description, and get in touch for details. That works against this buyer precisely.

Somebody buying a CNC machine has a specific list: bed size in millimetres, source power in watts, cutting speed at a given thickness, head type, consumption, warranty, and where the spare parts come from. A site that answers all of that with contact us is asking the buyer to make a call in order to learn something they should have been able to read. Most of them do not make the call. They go to the site that wrote the numbers down.

There is a bigger problem in this particular case: six industrial sectors in one catalogue. A goldsmith, a steel fabricator and a sign maker have nothing to do with one another, and each of them, seeing a catalogue full of machines that are not theirs, concludes that this supplier is not specialised in their work. Getting the taxonomy wrong here is not an organisational problem. It is a loss of trust.

Long technical specifications that have to be shown in full, not hidden behind a contact button.
Six unrelated industrial sectors sharing one catalogue.
Two complete languages, each with different search phrasing across three markets.
After-sales questions (servicing, spares, training) asked before the purchase and deciding it.
A catalogue that keeps growing with new models, and has to stay fast as it does.

The brief

What the new site had to do

Every model on a full page with its specification, its own URL, in Arabic and English.
A visitor filtering by their own trade (I work in gold) rather than by a technical term.
Servicing, spares and training given real pages rather than a line in the footer.
Search content covering how the question is phrased in Egypt, Saudi Arabia and the UAE.
Branches and local numbers made clear per market.
A dashboard that adds a new model with its specification without a developer.

Strategy

How the problem was approached

The first decision on this project was a taxonomy decision, not a design one: what does the catalogue divide by?

The obvious split is technology, fibre, CO2, plasma, router. That split is technically correct and commercially wrong, because the buyer does not identify themselves by laser type. They identify by their trade: I have a gold workshop, I cut steel, I make signage letters. So the catalogue divides by industrial sector, and the technology became a specification inside the model page rather than the door into it.

That one decision reshaped the site: the home page now asks the visitor what they work in, instead of offering them a list of laser types.

Taxonomy: Six sectors: metals, gold, laser welding, non-metallic, surface engraving, signage. A buyer picks their sector and sees only their machines, and a 132-model catalogue becomes twenty models that mean something to them. That is the difference between a catalogue that intimidates and one that helps.
The model page: Each model gets a full page: working area, power, speeds, head type, applications, warranty, and real photographs of the machine. The rule was that any number the buyer might ask for on a call has to be written on the page, because the aim is not to make them call in order to find out, it is to have them call already knowing.
The two languages: The English version is not a translated menu. Every model page has an English counterpart on its own URL, and the two declare each other with hreflang so Google serves the right one by where the searcher is. The search content was written twice rather than translated once, because somebody searching in English in the UAE types something quite different from somebody searching in Arabic in Egypt.
After-sales: Servicing, spare parts and training sit in the main navigation with the same weight as Machines. The reason is commercial: a serious buyer asks what happens when it stops before asking what it costs, and a site that answers that with a real page closes a lot of distance before any call.
Search content: More than a content pages written around the questions actually being typed: machine prices in Egypt, Saudi Arabia and the UAE, the difference between fibre and CO2, how to choose a router, what each type is used for. This is not blogging. It is the site's front door from search, and each page routes into the models it belongs beside.
Performance: A catalogue with hundreds of photographs gets heavy fast. So images are served in modern formats at sizes generated for the screen, and anything off-screen is not fetched until the visitor reaches it. Pages are rendered on the server, so the content arrives complete in the HTML rather than being assembled in the visitor's browser.

Design

How it looks, and why each call was made

The design is industrial in the literal sense: high contrast, a clear grid, and large product photography on clean ground. The core decision was to put the photograph and the specification beside each other on the model page rather than filing the specification into a tab below, because the buyer reads both at once, looking at the head in the picture while reading its power.

Catalogue cards were designed to be scanned fast: a photograph, the sector as a badge, the name, and two lines saying what this machine does. There is no price on the card, because price here depends on configuration, and printing a number creates an expectation that has to be corrected later in an awkward call.

Filtering by industrial sector: The buyer identifies by their trade, not by the laser type. This filter turns 132 models into the twenty that concern them.
Specifications in the open, not in a tab: Every collapsed tab is a number the buyer will not see, and every number not seen becomes either a question on a call or an exit to the site that wrote it down.
No price on the catalogue card: Price depends on configuration, accessories and country. One number on a card sets an expectation that has to be undone later in a harder conversation.
A WhatsApp number per market: A Saudi buyer will not call an Egyptian number. A local number says there is a presence in that country, which is half the confidence in an equipment deal.
A photo and video gallery of machines running: A machine mid-cut says more about edge quality than any table can. And that video gets forwarded in a WhatsApp thread, which makes it a sales tool rather than decoration.

The build

How it was built

The site is built on Next.js with pages rendered on the server, so the content arrives complete in the HTML. A requirement rather than a luxury on a site that depends on search this heavily.

A model in the system is not a hand-written page; it is a record with fields: sector, specification, photographs, applications, language. The page is assembled from the record, and the English version is assembled from the same record with its own fields. That is what makes adding a new model a few minutes in the dashboard rather than a ticket for a developer.

Alongside the content dashboard there is a search dashboard for reviewing titles, descriptions and indexing state, so that a site drawing half its value from search is not left to chance after launch.

A product record with discrete specification fields, not one rich-text box.
A language version per page on its own URL, with hreflang declared between them.
Sector filtering on the catalogue page itself without a page load.
Images served in modern formats at generated sizes, with off-screen ones deferred.
A dashboard for products and articles, and a second one for watching search.
Admin and API routes closed off in robots so they are never indexed.

Features

What the site can do

A six-sector catalogue with instant filtering: The visitor picks their sector and the catalogue filters immediately, with no page load.
A full specification page per model: Working area, power, speeds, head, applications and warranty, written down rather than saved for a call.
Two complete Arabic and English versions: Every page has a counterpart on its own URL, and the two are declared to search as versions of each other.
Maintenance, spare parts and training pages: After-sales questions answered with real pages, because they get asked before the purchase.
A buyer's guide written per market: Written around search phrasing in three markets, each page routing to the model it fits.
A local WhatsApp per market: Egyptian, Saudi and Emirati numbers, so the buyer contacts a number in their own country.
A machine photo and video gallery: Machines running, with the videos forwarded into sales conversations.
A careers page: The company hires technicians and sales staff, and this page carries the applications instead of an inbox.

Measurement

Figures you can check yourself, right now

Open the domain and run PageSpeed on it. These are the figures you should find.

96
Performance
Lighthouse desktop: run against the published domain, 6 September 2026
99
Accessibility
Lighthouse desktop: run against the published domain, 6 September 2026
59
Best Practices
Lighthouse desktop: run against the published domain, 6 September 2026
100
SEO
Lighthouse desktop: run against the published domain, 6 September 2026

Detail for anybody who wants to go deeper. These are Lighthouse figures against the published domain.

This catalogue could easily have been very heavy: hundreds of photographs, long specifications, two complete languages, every URLs. Two things stopped it, pages render on the server, and images are served in modern formats at generated sizes with 25 of 30 not fetched until needed. The result is Performance 96 on desktop and SEO 100, the highest SEO score in the set.

Best Practices at 59 is the lowest figure on this site, and the reason is known: third-party scripts on the page pull it down. That is an open piece of work, written here as it is, because a 59 on the page is more honest than a figure removed from it.

It is also worth writing that mobile performance sits clearly below desktop, which is normal for a catalogue this size, and it is where the next round of optimisation goes.

What was set up for Google to read

Half of this site's value arrives from search, so the structure was built for that from the start. Somebody searching for a fibre laser machine is not the same as somebody searching for CNC machine prices in Saudi Arabia. The first is intent to buy, the second is intent to compare, and each has a different page waiting for it.

A separate readable URL per model, in Arabic and English.
hreflang declared between both versions on every page, with an x-default.
A canonical on every page so filtered views are not counted as duplicates.
A title and description written per model rather than generated from its name.
Alt text on every product image, 30 of 30.
A published sitemap carrying every page across both versions.
A robots file closing the admin and API routes and leaving the catalogue open.
Internal linking from the buyer's-guide pages into the models they concern.

01·From the build

What was actually built

This site is four distinct bodies of work, each with its own logic.

The machine catalogue, 132 Arabic model pages with their English counterparts, divided across six industrial sectors: metals, gold, laser welding, non-metal, surface engraving, and signage and advertising. Each model page carries the description, the technical specification, the materials that machine cuts, a photo and video gallery, and related machines.

The spare-parts catalogue. A second complete and independent catalogue: spindle motors, control systems, sensors, plasma nozzles, cables and keypads. This is not a small section on a page; it is a store inside a store, and it is the answer to the question that stalls half the deals.

The services. A maintenance request page with a form, a training page on operating the machine, a buyer's guide, and photo and video galleries of machines running.

The search layer, pages written in the phrasing each market actually uses: CNC machine prices 2026 with instalments, laser machines in Saudi Arabia, laser machine suppliers in UAE. Every one of them routes into the model that answers it.

02·From the build

The taxonomy call: what does the catalogue divide by?

The first decision on this project was not a design decision. It was a taxonomy decision, and it shaped everything that followed.

The obvious split for a catalogue like this is by technology: fibre, CO2, plasma, router. That split is technically correct and commercially wrong, because the buyer does not identify themselves by laser type. They identify by their trade: I have a gold workshop, I cut steel, I make signage letters.

And if the owner of that gold workshop lands on a catalogue holding steel cutters, wood routers and welders, the conclusion they reach is not that the catalogue is broad. It is that this supplier does not specialise in their work. Getting the taxonomy wrong here is not an organisational problem; it is a loss of trust.

So the catalogue divides by industrial sector, and technology became a specification inside the model page rather than the door into it. That one call changed the home page itself: it now asks the visitor what they work in, instead of offering them a list of laser types.

03·From the build

The model page: the specification is written down, not saved for a call

Somebody buying a CNC machine arrives with a specific list: bed size in millimetres, source power in watts, cutting speed at a given thickness, head type, consumption, warranty, and where the spare parts come from.

A site that answers all of that with contact us for details is asking the buyer to make a call in order to learn something they should have been able to read. Most of them do not make the call. They go to the site that wrote the numbers down.

So the model page was built on one principle: everything that gets asked is written. The description, the technical specification, the materials, the photo and video gallery, and related machines so the comparison happens inside the site rather than outside it.

The photograph and the specification sit beside each other on the same screen rather than the specification being filed into a tab below, because the buyer reads both at once, looking at the head in the picture while reading its power.

The one thing deliberately not written is a price on the catalogue card. Price here depends on configuration, and printing a number creates an expectation that has to be corrected later in an awkward call.

04·From the build

Three markets, not one market with a translation

The company sells into Egypt, Saudi Arabia and the UAE. All three speak Arabic, but they search in different phrasings, compare against different prices and ask about supply in different ways.

So the search layer was written per market: CNC machine prices in Saudi Arabia, CNC machines for sale in the UAE, CNC companies in Egypt, and in English too, for the Gulf buyers who search that way. Not the same page with a city swapped, but content written in the phrasing actually used there.

Alongside it, a small decision that does more than any copy: a local WhatsApp number per market. A buyer in Riyadh contacts a Saudi number rather than an Egyptian one. That removes a psychological hesitation and the cost of an international call at the same moment.

Technically, the Arabic and English versions declare each other through hreflang with a canonical on every page, so filtered views are not counted as duplicates and each searcher reaches their own version.

05·From the build

The real objection is raised before the purchase, not after

Somebody paying for an industrial machine does not only ask what it does. They also ask: when will it stop, who repairs it, where do spare parts come from, and who trains my operators?

Those questions are usually filed on a website under after-sales service, which is the wrong label. They are not after-sales questions. They are pre-purchase questions, asked by somebody who has not paid yet.

So the site gave them real space: a complete spare-parts catalogue with its own product records, a maintenance request page with a form that arrives directly, and a training page on operating the machine. The largest anxiety for a first-time CNC buyer.

And the video gallery is not decoration. A machine running and a part being cut convince an industrial buyer more than any specification, and those videos get forwarded into the sales conversations themselves.

The phases

How the work ran

Understanding the buyer: Sessions with the sales team: which questions come up on every call? Those questions became the structure of the model page.
Taxonomy: Sorting 132 models into six industrial sectors. The longest decision on the project and the most consequential.
Information architecture: The URL map across both versions, and after-sales pages promoted to main sections.
Design: An industrial component set: the catalogue card, the specification table, the machine gallery.
Build: Next.js with server-rendered pages, a field-based product record, and a dashboard for products and articles.
Content: Loading 132 models with their specifications and photographs, and writing the buyer's guide in both languages.
Launch and indexing watch: Launch, the search dashboard connected, and indexing watched across both versions.

Handover

What became yours

Domain, hosting and source files in the client's name from day one
A control panel the content is edited from without a developer
A walkthrough for whoever takes the site over afterwards
A month of monitoring and fixes after launch

Outcome

The outcome

The catalogue became a sales instrument rather than a brochure. The buyer enters at their own trade, finds the model with its specification written out in front of them (working area, power, speeds, head, the materials it cuts, applications and warranty) and passes the maintenance, spare-parts and training pages that close the real objection: what happens when it stops? Then they make contact on a WhatsApp number in their own country.

All of it runs in two complete languages, with a search-facing content layer written in each market's own phrasing: prices in Egypt, prices in Saudi Arabia, suppliers in the UAE.

In one line: a supplier whose catalogue is wider than any one audience, and six trades that share nothing but a website. It was solved by dividing the catalogue the way the buyer divides themselves (by trade rather than by laser type) by writing every specification down instead of holding it back for a call, and by treating maintenance, spare parts and training as pre-purchase pages rather than after-sales ones. The client adds a new model in minutes from a dashboard, and it appears complete in both languages.

Delivery figures

132
model pages with full specifications
Counted in the published sitemap, 6 September 2026
6
industrial sectors the catalogue filters by
The published machines page
2
independent catalogues: machines and spare parts
The published site
3
markets with local contact numbers: Egypt, Saudi Arabia, the UAE
The published site