InfraDZ Software Marketing Site
موقع تعريفي بثلاث لغات لمنتج InfraDZ Software، وهو نظام ERP ونقاط بيع: صفحات للوحدات وللقطاعات، مع الأسعار والتحميل والصفحات القانونية بالفرنسية والعربية والإنجليزية ودعم كامل للاتجاه من اليمين إلى اليسار.
- دَوري
- مطور واجهات أمامية
- الفترة
- أبريل 2026 — مايو 2026
- الحالة
- مُنجز
الموقع العمومي هو الواجهة التسويقية لمنتج InfraDZ لتخطيط موارد المؤسسات (ERP) ونقاط البيع: لكل وحدة من وحدات المنتج ولكل قطاع مستهدف صفحة خاصة، إلى جانب صفحات الأسعار والتنزيلات والصفحات القانونية. ويُقدَّم الموقع بالكامل بالفرنسية والعربية والإنجليزية، مع عرض النسخة العربية من اليمين إلى اليسار عرضاً كاملاً.
بُني الموقع بإطار Next.js 16 مع Tailwind CSS كطبقة التنسيق الوحيدة، وجرى عمداً الاستغناء عن shadcn وRadix: فشريط التنقل والبطاقات وأقسام الأسعار وسائر عناصر الواجهة مكوّنات مكتوبة يدوياً. وهذا يقلّص عدد الاعتماديات ويُبقي بنية كل عنصر تحت السيطرة المباشرة — وهو شرط عملي عندما يجب أن تُعرض المكوّنات نفسها بشكل صحيح في اتجاهي الكتابة معاً.
المشكلة المطلوب حلّها
على موقع تسويقي لمنتج ERP ونقاط بيع أن يشرح الكثير — وحدات وقطاعات وأسعار وتنزيلات وصفحات قانونية — وكان على هذا الموقع أن يفعل ذلك ثلاث مرات: بالفرنسية والعربية والإنجليزية. وترفع العربية سقف التحدي، فهي ليست مجرد ترجمة نصوص، بل عرض كامل من اليمين إلى اليسار لكل تخطيط وقائمة وقسم. ومكتبات المكوّنات الجاهزة مثل shadcn وRadix تفرض افتراضاتها الخاصة في البنية والتنسيق — وهذا تحديداً ما لا يصح التنازل عنه حين يجب أن تنعكس الواجهة انعكاساً سليماً — فكان السؤال الهندسي: كيف يُسلَّم موقع ثلاثي اللغات متقن من دون الاعتماد عليها؟
كيف بُني
كان الحل إبقاء الحزمة التقنية صغيرة وامتلاك كل مكوّن. يعمل الموقع على Next.js 16 مع Tailwind CSS كطبقة تنسيق وحيدة، من دون shadcn أو Radix — فكل عنصر تنقّل وبطاقة وقسم مكتوب يدوياً، بحيث يكون سلوكه في اتجاهي الكتابة صريحاً لا موروثاً من مكتبة خارجية.
ونُظِّم المحتوى كما يُباع المنتج: صفحة لكل وحدة من وحدات ERP، وصفحة لكل قطاع مستهدف، إضافة إلى صفحات الأسعار والتنزيلات والصفحات القانونية، وكلها متاحة باللغات الثلاث مع إخراج النسخ العربية من اليمين إلى اليسار في كامل الموقع.
ماذا يفعل
موقع بثلاث لغات
كل صفحة متاحة بالفرنسية والعربية والإنجليزية — الموقع بأكمله، لا مجموعة مترجمة منه فقط.
دعم كامل للاتجاه RTL
تُعرض النسخة العربية من اليمين إلى اليسار في كامل الموقع: التخطيطات والقوائم والأقسام تنعكس فعلياً ولا تكتفي باستبدال النصوص.
مكوّنات مبنية يدوياً
لا shadcn ولا Radix: كل مكوّنات الواجهة كُتبت من الصفر باستخدام Tailwind، ما يُبقي البنية والسلوك تحت السيطرة المباشرة في اتجاهي الكتابة.
صفحات وحدات المنتج
لكل وحدة من وحدات منتج ERP ونقاط البيع صفحة تسويقية خاصة تشرح ما تقدّمه.
صفحات القطاعات
صفحات مخصّصة تعرض المنتج من زاوية كل قطاع مستهدف.
الأسعار والتنزيلات والقانوني
الواجهة التجارية والقانونية — صفحات الأسعار وتنزيل البرنامج والصفحات القانونية — مبنية كاملة باللغات الثلاث.
بُني باستخدام
الواجهة الأمامية
يتطابق التوجيه المعتمد على الملفات في Next.js 16 مباشرة مع بنية الموقع — صفحات الوحدات والقطاعات والأسعار والصفحات القانونية منظمة حسب اللغة — كما يناسب العرض من جهة الخادم موقعاً تسويقياً قائماً على المحتوى.
يحافظ TypeScript على اتساق موقع يُصان بثلاث لغات متوازية: فالخصائص وبنى المحتوى المعرّفة بأنواع صريحة تكشف الفروق بين اللغات عند البناء لا في الإنتاج.
مع استبعاد shadcn وRadix عمداً، يشكّل Tailwind نظام التنسيق بأكمله: تُبقي الأصناف الأداتية المكوّنات اليدوية متسقة بصرياً وتجعل عكس الاتجاه في النسخة العربية قابلاً للإدارة.