Languages

The languages that ship

Every text, button label, image description, form message and page title exists in both languages.

How the language is chosen

• English pages have no language in the address; Arabic pages start with /ar.
• A visitor who opens / with a browser that prefers Arabic is sent to /ar. src/proxy.ts does this.
• The language menu in the header, and in the menu on phones, switches language and keeps the visitor on the same page. The site remembers the choice for the next visit.
• Each language has its own title, description and canonical address, and each page tells search engines where the other language is.

Right to left

On Arabic pages, src/app/[locale]/layout.tsx sets lang="ar" and dir="rtl" on the page, so the whole layout mirrors: the header, the cards, the dashboard mockup and its 3D tilt, and the forms read from right to left.

The components use logical Tailwind classes that follow the direction, such as ms-2, pe-4, start-0 and text-start. When you add markup, use these instead of ml-*, pr-*, left-* or text-left, or the Arabic page comes out wrong.

A few pieces stay left to right in both languages on purpose: the terminal and the file tree in the feature cards, the charts, and phone numbers on the contact page.

Where the texts live

The texts are split into four folders under messages/, each with an en.json and an ar.json:

Change a text

• Change the value in the English file and the matching one in the Arabic file. Keep the keys the same in both.
• A key missing from one file shows its name in place of the text on that language's page.
• Words in curly braces, such as {year}, {count} and {name}, are filled in by the site. Keep them as they are.

The site's own Arabic labels

When you write about the site in Arabic, use the labels it shows:

Add a language

1. 01

   Add its code to the routing

   Add the language code to locales in src/i18n/routing.ts. For example French:

   src/i18n/routing.tsCopy

   locales: ["en", "ar", "fr"],
2. 02

   Add its message files

   In each of the four folders under messages/, copy en.json under the new code and translate the values. Keep every key and every word in curly braces, and set metadata.ogLocale in messages/common/fr.json, such as fr_FR. For the home folder:

   Terminalin Publino-templateCopy

   cp messages/home/en.json messages/home/fr.json
3. 03

   Add it to the language menus

   Give it a flag and a code in src/components/LanguageSwitcher/index.tsx (flagComponents and localeIsoCodes), and a flag and a name in src/layouts/Navbar/components/MobileLanguageSwitcher.tsx (flagComponents and localeNames). The flags come from country-flag-icons, such as FR.
4. 04

   Set its direction, if it needs it

   Only Arabic is treated as right to left. For another right-to-left language, extend the locale === "ar" checks in src/app/[locale]/layout.tsx, src/features/home/DashboardMockup/components/index.tsx and src/features/home/WhyChooseUs/index.tsx.

Restart yarn dev, or build again, and the new language answers at its own address, here /fr. The canonical links, the language links and the sitemap pick it up by themselves.