موقع الشركة التسويقي
AI Cloud Corporate Website
الموقع التعريفي للشركة، بُني بـ Next.js ثم أُعيد بناؤه بـ Angular 18: 8 صفحات و35 مكوّنًا مع الحفاظ على حركات التمرير والتبديل الفوري بين العربية والإنجليزية.
نظرة عامة
الموقع التعريفي لشركة AI Cloud. بُني أولًا بـ Next.js ثم أُعيد بناؤه بـ Angular 18 بمكوّنات Standalone: 8 صفحات و35 مكوّنًا، مع الحفاظ على حركات التمرير والتبديل الفوري بين العربية والإنجليزية.
دوري
مطوّر Frontend في AI Cloud. بنيت الموقع الأصلي وقدت عملية النقل إلى Angular.
أبرز الميزات
- ثماني صفحات: الرئيسية، من نحن، الخدمات، الشركاء، الأعمال، CleanTech، السلام الدولية، والتواصل.
- خدمة ترجمة مخصصة مبنية على Signals: تبديل فوري بين العربية والإنجليزية مع RTL/LTR، وحفظ اللغة المختارة، دون إعادة تحميل الصفحة.
- حركات GSAP وScrollTrigger تُهيَّأ وتُنظَّف مع دورة حياة مكوّنات Angular.
- نموذج تواصل مرتبط بواجهة الرسائل الخاصة بالشركة.
- مسارات محمّلة عند الطلب لكل صفحة وتخطيط متجاوب.
الشاشات
تفاصيل تقنية
GSAP داخل دورة حياة Angular
تُنشأ الحركات في ngAfterViewInit وتُلغى في ngOnDestroy، فلا تبقى Timelines أو Triggers عالقة عند التنقل بين الصفحات.
ترجمة قائمة على Signals
خدمة واحدة تحتفظ باللغة الحالية كـ Signal وتحفظها في المتصفح وتحدّث لغة الصفحة واتجاهها، فتستجيب كل المكوّنات فورًا.
التحديات
متغيرات CSS تحت View Encapsulation
تشخيص وإصلاح مشكلة إنتاج متعلقة بنطاق متغيرات CSS تحت View Encapsulation في Angular.
إعدادات خط البناء
تشخيص وإصلاح مشكلات إعدادات البناء المتعلقة بالمسارات المحمّلة عند الطلب وحدود حجم الحزم.