رميم الطبية
كتالوج طبي بأكثر من 500 منتج — بلغتين، وبلا إطار واحد مفقود
- النوع
- مشروع عميل
- السنة
- 2025
- الحالة
- مباشر
- النطاق
- +500 منتج · لغتان
- التقنيات
- React · Vite · Framer Motion · i18n
شركة أجهزة طبية تحتاج موقع عرض يليق بمنتجاتها: كتالوج ضخم، جمهور يقرأ بالعربية أولًا، وعملاء دوليون يتوقعون نسخة إنجليزية بنفس الجودة — كل ذلك على أجهزة تتراوح من حاسب المكتب إلى جوال متوسط.
التحدي
كتالوج يضم أكثر من 500 منتج بصور ثقيلة، ولغتان باتجاهين مختلفين، وحركات واجهة يريدها العميل "حيّة" دون أن تتحول إلى عبء على الأداء. أغلب الحلول الجاهزة تعامل العربية كترجمة ملصوقة فوق تخطيط إنجليزي — وهذا بالضبط ما أراد العميل تجنّبه.
النهج الهندسي
بنيت الواجهة بـReact وVite على أساس ثنائي اللغة من اليوم الأول: تخطيط بخصائص CSS منطقية ينعكس تلقائيًا مع الاتجاه، وطبقة محتوى واحدة تغذي اللغتين. الحركة كلها على transform وopacity فقط — لا خصائص تجبر المتصفح على إعادة التخطيط — مع تحميل كسول للصور واحترام تفضيل تقليل الحركة.
النتيجة
موقع مباشر يعرض الكتالوج كاملًا بحركات ثابتة عند 60fps ونتائج Lighthouse تتجاوز 90، والنسختان العربية والإنجليزية متطابقتان في الجودة — التخطيط والخط والتفاعل تنعكس بنظافة في الاتجاهين.
