التحدي والسياق
احتاج العميل إلى حضور إلكتروني مؤسسي يعكس مكانته كشركة استشارية إقليمية راسخة. كان التحدي الرئيسي يتمثل في إنشاء تجربة رقمية متطورة يمكنها توصيل عروض الخدمات المعقدة بفعالية مع الحفاظ على سرعة التحميل وسلاسة التفاعل عبر جميع الأجهزة.
تعمل الشركة الاستشارية عبر أسواق خليجية متعددة وتخدم جماهير ناطقة بالعربية والإنجليزية. تطلب ذلك نهجاً مدروساً للتدويل يتجاوز مجرد الترجمة ليشمل دعماً مناسباً لتخطيط من اليمين إلى اليسار، وصوراً مناسبة ثقافياً، وتنسيقات مخصصة حسب المنطقة.
بنية النظام وتصميمه
بني المشروع على Next.js 15 باستخدام بنية App Router. وفر هذا الاختيار عدة مزايا بما في ذلك العرض من جانب الخادم لتحميل الصفحات الأولي، وتحسين مدمج للصور والخطوط، وهيكل توجيه نظيف يدعم المتطلب ثنائي اللغة من خلال معاملات اللغة الديناميكية.
يستخدم نظام التدويل برمجية next-intl الوسيطة للكشف عن اللغة والتوجيه. جميع المحتويات موجودة في ملفات JSON للترجمة، مما يسمح لأعضاء الفريق غير التقنيين بتحديث النصوص دون لمس الكود. يحدد تكوين التوجيه الإنجليزية كلغة افتراضية والعربية كلغة ثانوية، وتعيد البرمجية الوسيطة توجيه المستخدمين تلقائياً إلى لغتهم المفضلة بناءً على إعدادات المتصفح.
يتبع تصميم المكونات نهجاً قائماً على الأنماط حيث توجد عناصر واجهة المستخدم القابلة لإعادة الاستخدام في دليل مكونات مشترك بينما تبقى المكونات الخاصة بالصفحات مجاورة لمساراتها. هذا التنظيم يجعل من السهل الحفاظ على الاتساق عبر الموقع ثنائي اللغة مع إبقاء الكود ذي الصلة معاً.
يستخدم تنفيذ الرسوم المتحركة نهجاً متعدد الطبقات. تتعامل مكتبة Motion مع الرسوم المتحركة المعقدة والمصممة لأقسام البطل وعروض الميزات. توفر رسومات Lottie المتحركة المتجهية وزناً خفيفاً لعناصر بصرية محددة مثل علامات الجدول الزمني وأيقونات القيم. تتعامل الرسوم المتحركة المعتمدة على CSS مع تغييرات الحالة البسيطة وتأثيرات التمرير. يحافظ هذا النهج متعدد الطبقات على حجم الحزمة معقولاً مع تقديم الإحساس المتطور الذي أراده العميل.
القرارات الهندسية الرئيسية
مكن اختيار Tailwind CSS 4 كأساس للتصميم من التطوير السريع للتصاميم المخصصة دون مقاومة الإعدادات الافتراضية للإطار. يستخدم التكوين متغيرات CSS للسمات، مما يسهل الحفاظ على ألوان ومسافات وطباعة متناسقة عبر جميع المكونات. يدعم الوضع الداكن متغيرات CSS أيضاً، مما يسمح بالتبديل السلس بين السمة الفاتحة والداكنة حسب تفضيل المستخدم.
كانت إمكانية الوصول للمكونات متطلباً غير قابل للتفاوض. بدلاً من البناء من الصفر، يستفيد المشروع من مكونات Radix UI الأولية للعناصر التفاعلية المعقدة مثل الأكورديونات ومربعات الحوار وقوائم التنقل. تأتي هذه المكونات مع دعم كامل للتنقل عبر لوحة المفاتيح وقارئات الشاشة مدمجاً، مما يضمن عمل الموقع لجميع المستخدمين بغض النظر عن القدرات.
يحدث تحسين الصور على مستويات متعددة. يتولى مكون الصور في Next.js التحويل التلقائي للتنسيق والتحجيم المتجاوب. تُخدم الأصول الثابتة من الدليل العام مع رؤوس تخزين مؤقت مناسبة. يتضمن تكوين المشروع sharp لمعالجة الصور في الإنتاج، مما يضمن أن البناء النهائي يقدم أصولاً محسنة بشكل صحيح للزوار.
استخدم TypeScript في جميع أنحاء التطبيق مع الوضع الصارم مفعلاً. يكتشف هذا الأخطاء أثناء التطوير التي قد تظهر في الإنتاج، والتعريفات النوعية تسهل على المطورين فهم واجهات المكونات وهياكل البيانات عند إجراء التغييرات.
التسليم والنتائج
التسليم النهائي هو موقع مؤسسي ثنائي اللغة كامل الوظائف يُحمَّل بسرعة ويوفر رسوماً متحركة سلسة على الأجهزة الحديثة. النسختان الإنجليزية والعربية كاملتان مع محتوى وصور وتعديلات تخطيط مناسبة لكل لغة. جميع العناصر التفاعلية تلبي معايير إمكانية الوصول، ويعمل الموقع عبر إصدارات المتصفحات المستهدفة.
يخلق نظام الرسوم المتحركة اهتماماً بصرياً دون إرباك المستخدمين أو التسبب في مشاكل أداء على الأجهزة الأقل قدرة. تسمح مكتبة Motion بالتحكم الدقيق في توقيت الرسوم المتحركة ومشغلات التمرير، بينما تظل ملفات Lottie صغيرة لأنها متجهية. يقدم هذا النهج الإحساس المتميز الذي أراده العميل مع الحفاظ على عملية الموقع للاستخدام الفعلي.
توفر مكتبة المكونات التي بنيت خلال هذا المشروع أساساً متيناً للتحديثات المستقبلية. يمكن للصفحات الجديدة إعادة استخدام المكونات الحالية، ويمكن أن تحدث تغييرات المحتوى من خلال تحديثات ملفات الترجمة دون مشاركة المطورين. هذا الفصل بين المسؤوليات يعني أن الشركة الاستشارية يمكنها الحفاظ على حضورها الإلكتروني وتطويره بكفاءة مع مرور الوقت.