Skip to content
All work

Pernoscal: an Arabic-first website and back office for a hydraulics maker in Egypt.

A cylinder that comes apart as the page scrolls, three engineering calculators, a quote request in five steps and a service desk, with the back office where sales and service answer every request.

Visit pernoscal.com

The problem

Pernoscal designs, builds and services hydraulic presses, recycling balers and hydraulic cylinders in its own workshop in Egypt, for factories across Africa and the Middle East. Each machine is made for the job it will do, so a sale starts with engineering questions: how much force, what size, which material. Its customers reach it by phone, WhatsApp, Messenger, Instagram and email, to ask for a machine and, after delivery, to ask for service.

What we built

A website that answers the engineering questions before the first call, and a back office that keeps every request: in Arabic first, with English as complete as the Arabic.

  • Inside the cylinder. As the home page scrolls, a hydraulic cylinder extends under pressure, opens in section and comes apart, each part named. It loads only once the visitor starts to scroll, and a still image stands in wherever motion is reduced.
  • Engineering calculators. A press's force from its bore and pressure, a cylinder's push, pull, speeds and oil, and a bale's weight from its material and size, in metric or imperial units. A result opens a quote request with its figures already in.
  • A catalogue built around the job. Presses, balers, cylinders and machines made to order, with the industries they serve and the services around them. Each model has its own page and its own quote request.
  • A quote request in five steps. What is needed, the technical details, the project, the contact and a review, with drawings and photos attached. A draft stays in the visitor's browser until it is sent.
  • A service desk. A service request, with the machine's serial number and photos, gets its number at once and a private link to follow it. Response targets count working hours, a visit is agreed by date, and the customer closes the request and rates the service.
  • Sales in the back office. Leads and their pipeline, companies and contacts, tasks, and quotations made there, sent as a PDF and accepted or declined at the customer's own link.
  • Every channel in one inbox. WhatsApp, Messenger and Instagram conversations, and the company's mailbox, read and answered in the back office. With the customer's consent, a service request's updates go out on WhatsApp.
  • The site, run from the back office. Every page's words and pictures in both languages, with versions and scheduled publishing. Visits counted without cookies, with AI assistants among their sources. A role and permissions for each person, a second sign-in step for owners and admins, and a record of every change.

How

We wrote the plan before any code: every page, the calculators' formulas, the words in both languages, the data and who may do what. We redrew the identity from Pernoscal's registered logo. Then we built the website, the back office and the API from scratch, in three parts. The website and the back office are Next.js, and the website's pages are static, so they open fast and are easy for search engines and AI assistants to read. The API is NestJS on PostgreSQL, with a background worker on Redis for mail, media and publishing. The cylinder is drawn live with three.js, which loads only when the visitor starts to scroll, and every line of the calculators' formulas is under test.

The result

Pernoscal's website runs in Arabic and English, and every request sent from it, for a quote or for service, reaches its team in one back office.

The home page's cylinder at the fourth of its five steps: apart, with each part named.

The hydraulic cylinder calculator: the bore, rod, pressure, flow and stroke in, the forces, speeds, times and oil out.

The home page on a phone.

Our role

We planned and built it: the website, the back office and the API, on an identity redrawn from Pernoscal's registered logo.

Build your blueprint