موقع شركة الألياف الذهبية — الحلول التقنية المتكاملة
عميلنا: شركة الألياف الذهبية
المشكلة
شركة الألياف الذهبية — برمجيات وحماية واستضافة وذكاء اصطناعي وهوية إبداعية — تفتقر إلى بوابة رقمية مؤسسية تليق بمكانتها وخبرتها الممتدة منذ 2007. الموقع السابق لم يكن يعكس اتساع نطاق خدماتها ولا يُظهر شراكاتها المؤسسية مع غرفتي تجارة وصناعة حلب ولا مشروعها الإعلامي الرائد «حلب منارة الشرق». غياب تجربة مستخدم حديثة ثنائية اللغة أضعف الثقة الأولى لدى العملاء المحتملين وفرق الشركاء.
الحل
بنينا موقعاً مؤسسياً ثنائي اللغة (عربي–إنكليزي) بتصميم فاخ يُشبه مواقع شركات Silicon Valley، يعتمد نظام تصميم مخصص: أزرق داكن × ذهبي ملكي × سماوي تقني مع بطاقات زجاجية وتأثيرات أورورا. يعرض الموقع سبعة أقسام: هيرو تفاعلي بأرقام متحركة، من نحن، ست خدمات رئيسية (الذكاء الاصطناعي والأتمتة، الاستضافة والبنية السحابية، الحماية والمرونة، المنصات والبرمجيات، التصميم والهوية، الشراكات)، ثلاثة مشاريع بارزة (غرفة صناعة حلب، غرفة تجارة حلب، حلب منارة الشرق)، معرض إنجازات مع عارض صور وlightbox، قسم خاص بمشروع «حلب الآن» الإعلامي، ورؤية المستقبل. يتضمن الموقع محرك i18n مدمج يتبدّل بين العربية والإنكليزية مع دعم كامل لاتجاه RTL/LTR، خطوط عربية (IBM Plex Sans Arabic) وإنكليزية (Outfit) محملة محلياً، بيانات منظمة Schema.org، وتجربة متجاوبة بالكامل حتى شاشات الهاتف.
مميزات المنصة
أبرز ما تقدمه هذه المنصة — من الأساسيات إلى الاحترافية
🌐 ثنائي اللغة مع تبديل فوري — محرك i18n مدمج يتبدّل بين العربية والإنكليزية بضغطة واحدة، مع حفظ التفضيل في localStorage.
🔄 دعم كامل RTL/LTR — يتغيّر اتجاه الصفحة واتجاه النص والعناصر تلقائياً عند تبديل اللغة، مع خطوط مخصصة لكل لغة.
🎨 نظام تصميم فاخ مخصص — أزرق داكن × ذهبي ملكي × سماوي تقني مع بطاقات زجاجية وحدود متوهجة وتدرجات ذهبية متحركة.
✨ تأثيرات أورورا وزجاجية — خلفية متحركة بثلاث طبقات أورورا مع شوشة noise ومزج screen لعمق بصري سينمائي.
🌌 كوكبة جزيئات تفاعلية — لوحة Canvas ترسم جزيئات ذهبية وسماوية متصلة بخطوط شفافة تتحرك بهدوء في الخلفية.
🔮 توهّج المؤشر — هالة نصف شفافة تتبع حركة الماوس بمزج screen تضيف بعداً تفاعلياً خفيفاً.
🧲 أزرار مغناطيسية — الأزرار الرئيسية تنجذب نحو المؤشر عند اقترابه منها بتأثير فيزيائي طبيعي.
🎴 إمالة ثلاثية الأبعاد — بطاقات المشاريع تميل بمنظور 3D عند تحريك المؤشر فوقها.
📊 عدادات متحركة — أرقام الهيرو (2007، 35+، 45%، 3) تعدّ من صفر بتأثير easing عند دخولها مجال الرؤية.
🎞 شريط أخبار متحرك — ماركي أفقي لا نهائي يعرض الكلمات المفتاحية للخدمات، يتوقف عند التمرير فوقه.
🖼️ معرض إنجازات مع عارض صور — ست صور مع تنقل وتحريك تلقائي وأزرار تصغير/توسيع وصور مصغرة نشطة.
🔍 عارض Lightbox — تكبير الصور في طبقة سوداء شفافة مع تنقل بلوحة المفاتيح (أسهم + Escape).
📱 تجاوب كامل — تخطيط متكيف بنقاط كسر (1060px، 640px) مع قائمة هامبرغر للهاتف.
🏗️ رأس لاصق مع زجاجية — الرأس يتحول إلى شريط ثابت مع backdrop-filter عند التمرير.
🚀 كشف تدريجي عند التمرير — العناصر تظهر بتأثير fade+slide عند دخولها مجال الرؤية عبر IntersectionObserver.
⏱️ ساعة حلب حية — ساعة رقمية في التذييل تعرض توقيت Asia/Damascus محدّثة كل ثانية.
🔐 بيانات Schema.org منظمة — بيانات Organization بتنسيق JSON-LD تشمل الاسم والتأسيس والعنوان والهاتف والشعار.
♿ إتاحة — رابط تخطّي إلى المحتوى، علامات aria، ودعم prefers-reduced-motion يوقف كل الحركات.
📐 شريط تقدم التمرير — شريط ذهبي–سماوي في أعلى الصفحة يملأ بنسبة التمرير.
🔝 زر العودة إلى الأعلى — يظهر بعد التمرير ويُعيد المستخدم إلى الهيرو بسلاسة.