1## 0. Arabic version (applies to everything below)
2
3The site and the dashboard are both bilingual: Arabic and English.
4
5Language and routing:
6- Use next-intl with routes /ar and /en. Arabic is the default language (my audience follows me in Egyptian Arabic). Add a language switch in the top bar of the site and the dashboard.
7- Arabic copy is written in Egyptian Arabic, friendly and simple, not formal.
8- Add hreflang tags and a separate share image per language.
9
10Font:
11- Arabic uses Thmanyah Bold for headings and display text. Use the regular weight of the same family for body text if it's available.
12- I will put the font files in /public/fonts/thmanyah. Load them with next/font/local. Fallback: IBM Plex Sans Arabic, then system-ui.
13- Keep JetBrains Mono for prompts and code in both languages.
14- Handwritten notes and sticky notes in Arabic use Thmanyah Bold with the same small rotation, since Caveat has no Arabic letters.
15
16RTL:
17- Arabic pages use dir="rtl". Build every layout with logical properties (ms, me, ps, pe, start, end) so it mirrors automatically.
18- Mirror direction based details: folder tabs, cursors, latte cup corner, timeline line, toolbar order, arrows and icons that point forward.
19- Prompts and code stay left to right inside the VS Code window, even on Arabic pages. Each prompt has a direction setting (auto, LTR, RTL) for prompts written in Arabic.
20- Use Western digits (0 to 9) for prices, dates and the countdown.
21
22Animations in Arabic:
23- Never split Arabic text into characters with SplitText, because it breaks letter joining. Split Arabic by words or lines only.
24- Flip horizontal motion in RTL (things that slide in from the left come from the right).
25
26Price line in Arabic, same style as English, for example: "يعني 250 جنيه. كوباية سبانش لاتيه واحدة."
27
28Dashboard:
29- The dashboard UI itself works in Arabic (RTL) and English, with a language switch.
30- Every content field has AR and EN tabs. Show a "missing translation" badge on anything that only exists in one language, and a filter to list all missing translations.
31- The live preview has a toggle to switch between the Arabic and English site.
32- Theme and layout settings (colors, latte on/off, section order) are shared between both languages. Text, images with text, and SEO are per language.
33
34CRM:
35- Public forms appear in the visitor's language. Save each contact's preferred language.
36- Message templates (WhatsApp and email) have an Arabic and an English version, and the right one is picked automatically per contact.