أبراج بلاتينيوم: موقع حلول الألياف الضوئية
حضور رقمي احترافي لرواد الاتصالات في سوريا
نظرة عامة: التحدي
كانت شركة أبراج بلاتينيوم المحدودة، المزود الرائد لحلول الألياف الضوئية، بحاجة إلى موقع إلكتروني حديث يعكس خبرتها التقنية وريادتها في السوق. كان التحدي هو تصميم وبناء موقع عالي الأداء ومتجاوب يعزز الثقة لدى العملاء من قطاع الأعمال، ويعرض خدمات الشركة بوضوح، ويوفر قناة موثوقة لاستقبال استفسارات العملاء الجدد.
الموقع المباشر | [مستودع GitHub (خاص)] | عرض التصميم على Figma
🎯 الميزات الرئيسية والتقنيات المستخدمة
بصفتي مطور الواجهة الأمامية، ركزت على بناء تجربة مستخدم غنية وموثوقة باستخدام أحدث التقنيات.
- تنقل ديناميكي: شريط تنقل ثابت يتغير من شفاف إلى صلب عند التمرير، تم بناؤه باستخدام
react-scrollلتوفير تنقل سلس ومتحرك بين الأقسام. - واجهة تفاعلية: تنفيذ تأثيرات تفاعلية عند التمرير، وسلايدر شهادات العملاء، ونص متحرك باستخدام
React Typing Effectلخلق تجربة ديناميكية. - نموذج تواصل موثوق: دمج واجهة Web3Forms API لضمان وصول استفسارات العملاء عبر النموذج فوراً وبشكل موثوق إلى البريد الإلكتروني.
- الأداء أولاً: استخدام Vite لتسريع سير العمل أثناء التطوير وضمان سرعة تحميل عالية في النسخة النهائية.
🖼️ المنتج النهائي قيد العمل
فيما يلي بعض الميزات الرئيسية للموقع المنشور، والتي توضح كيف تساهم اختيارات التصميم والتطوير في تحسين تجربة العملاء من قطاع الأعمال.
عرض الخدمات التفاعلي
تم دمج قسمي “خدماتنا” و"من نحن" لخلق تجربة سلسة. بطاقات تفاعلية مع تأثيرات عند التمرير تعرض الخدمات الأساسية للشركة، مع مشغل فيديو مدمج يتيح سرد قصة العلامة التجارية دون مغادرة الصفحة.
معرض المشاريع القابل للتوسيع
لتجنب ازدحام المعلومات، يعرض معرض المشاريع مجموعة مختارة في البداية. زر “عرض المزيد” يكشف المشاريع الإضافية بسلاسة، مما يسمح للعملاء المهتمين باستكشاف جميع الأعمال عند الطلب.
تجربة جوال سلسة
الموقع متجاوب 100%. على الأجهزة المحمولة، يتحول التنقل إلى قائمة جانبية سهلة الاستخدام، مما يضمن تجربة احترافية وسهلة للعملاء أثناء التنقل.
🎨 عملية التصميم وتجربة المستخدم
كان الهدف من التصميم هو خلق هوية بصرية نظيفة واحترافية تعزز مصداقية العلامة التجارية وتوفر وصولاً سريعاً وسهلاً للمعلومات.
- الجمهور المستهدف: الشركات والمؤسسات التي تبحث عن بنية تحتية شبكية عالية الجودة.
- لوحة الألوان: أزرق احترافي (
#003366)، أبيض (#FFFFFF)، ورمادي (#F5F5F5). - الخطوط: استخدام Poppins و Open Sans لسهولة القراءة والمظهر العصري.
النماذج النهائية
هذه هي النماذج عالية الدقة التي تم الاعتماد عليها في تنفيذ الواجهة الأمامية.
| واجهة سطح المكتب | واجهة الجوال |
|---|---|
 |  |