السابق: كود هيكلي ثابت بمسار لوني واحد معتم لا يتفاعل مع حركية محتوى الموقع.
الحالي: إعادة البناء برمجياً بالكامل ليعتمد على التوزيع المرن (Flexbox) لضمان الاستجابة المطلقة مع شاشات الموبايل.
التطوير الديناميكي: دمج خصائص (Backdrop-filter) برمجياً لتمرير الخلفية الحركية بشكل شفاف دون التأثير على سرعة الاستجابة أو أداء السيرفر.
📐 المنظور التصميمي والمظهري
السابق: شريط معتم يفتقر إلى الهرمية البصرية، مع غياب روابط التواصل السريع وتصفح اللغات.
الحالي: تصميم هيكلي مزدوج (Double-Deck)؛ شريط علوي للمعلومات وروابط التواصل، وسفلي رئيسي للقائمة.
الـ UI/UX المطور: إدخال المظهر الزجاجي (Glassmorphism)، وإضافة زر اتصال مباشر (CTA) بارز لطلب "استشارة مجانية" مع استبدال النصوص بأيقونات جرافيكية ذكية للغات لتسهيل التصفح.
2. واجهة الموقع الرئيسية (Hero Section)
❌ الوضع السابق (التصميم القديم)
✅ الوضع الحالي (التصميم المطور)
⚙️ المنظور البرمجي والتقني
السابق: كود برمي خطي بسيط يعتمد على خلفية شجرية ثابتة، تفتقر إلى أي ربط شرطي أو تخصيص متطور للغات.
الحالي: بناء كود (Custom Shortcode) متكامل ومبني بالـ PHP ليعالج النصوص والروابط ديناميكياً بناءً على لغة تصفح المستخدم (عربي/إنجليزي) تلقائياً.
الربط الديناميكي للأزرار: برمجة أزرار تفاعلية مربوطة مباشرة بنظام النماذج الخارجي (Kobotoolbox) لطلب المشاريع، ونظام الاتصال الفوري عبر الواتساب لضمان أتمتة تدفق البيانات.
📐 المنظور التصميمي والمظهري
السابق: خطوط بيضاء تقليدية فوق خلفية داكنة معتمة، بوجود أزرار دائرية مكررة وبطاقات بيضاء حادة تسبب تشتتاً بصرياً وتفصل انسيابية التصفح.
الحالي: تصميم سينمائي فاخر يعتمد على فيديو متحرك بالخلفية لعرض الهوية البصرية بشكل حي، مع استخدام تدرج لوني للنصوص (ذهبي ملوكي وأبيض هيدروليكي) لتعزيز الفخامة الهندسية.
تطوير الـ UI/UX والأزرار: إعادة تصميم الأزرار (CTA) بشكل مستطيل هندسي حاد مفرغ وممتلئ، مع توزيع بصري متوازن يركز على توجيه عين العميل نحو "استكشاف الخدمات" أو "تسجيل المشروع" مباشرة.
3. قسم نبذة عن الشركة (About Us Section)
❌ الوضع السابق (التصميم القديم)
✅ الوضع الحالي (التصميم المطور)
⚙️ المنظور البرمجي والتقني
السابق: تصميم خطي يعتمد على صورة خلفية مكررة في الهيدر، مع استدعاء أرقام وإحصائيات ثابتة (Static Numbers) وصورة جرافيكية ثابتة للمهندس.
الحالي: بناء كود هيكلي تفاعلي مع دمج مشغل وسائط ديناميكي (Video Player) مخصص يعرض فيديو تسارعي (Timelapse) لمبنى حقيقي يرتفع من الصفر بشكل انسيابي دون التأثير على زمن تحميل الصفحة.
تطوير التجاوب (Mobile Grid): تطوير نظام الـ CSS Grid برمجياً لضمان تحول البطاقات الأربع (تحليل دقيق، تخطيط رقمي، إلخ) إلى ترتيب عمودي مرن أو شبكة ثنائية متناسقة تماماً عند التصفح من الهواتف الذكية لمنع تداخل النصوص.
📐 المنظور التصميمي والمظهري
السابق: مساحات بيضاء مفرطة، نصوص ممتدة تأخذ عرض الشاشة بالكامل، مع استخدام إحصائيات تقليدية وصورة غير واقعية لا تعكس الهوية البصرية الحقيقية للمشاريع.
الحالي: إعادة تصميم واجهة المستخدم (UI) لتعمل بنظام الـ Split-Screen التفاعلي؛ حيث تم دمج نص الرؤية بذكاء بجانب فيديو المشروع الواقعي ذي الحواف الهندسية الدائرية (Border-radius) الفخمة.
السابق: كود يعتمد على استدعاء جرافيكس بسيط وأيقونات خطية مكررة، مع استخدام خطوط رفيعة يصعب قراءتها وتفتقر إلى استجابة حقيقية للهواتف.
الحالي: بناء كود (Custom Responsive Layout) متكامل يعتمد على الـ Flexbox والتوزيع الشبكي الذكي، لعرض البطاقات الست بشكل متناسق ومريح للعين برمجياً.
برمجة التفاعل والمحاذاة: إضافة تأثيرات الـ Hover البرمجية وحسابات ذكية للمساحات (Padding & Margins) تضمن ثبات الكروت هندسياً عند التصفح، مع تضمين كود مخصص يضمن عرض البطاقات بنظام ثنائي (Two-column grid) على الموبايل لمنع العشوائية الرقمية.
📐 المنظور التصميمي والمظهري
السابق: كروت بيضاء تقليدية بحواف حادة تعلوها أيقونات ملونة صغيرة غير معبرة هندسياً، مع وجود مساحات بيضاء فارغة تشتت انتباه العميل.
الحالي: إدخال هوية بصرية مذهلة تعتمد على بطاقات ذات مظهر زجاجي عصري (Glassmorphism) مع خلفية ناطحات سحاب هندسية مموهة تبرز تخصص الشركة الفاخر.
تطوير الـ UI/UX والأيقونات: استبدال الأيقونات العادية بأيقونات جرافيكية هندسية ذات لون أخضر ملوكي موحد (المعماري الخارجي، الداخلي الفاخر، تنسيق الحدائق، إلخ)، مع تنسيق النصوص بخطوط عريضة ومتوازنة تمنح التصميم هيبة ومظهرًا مؤسسيًا واحترافيًا أمام الإدارة والعملاء.
5. قسم مكتبة إيليت المعرفية (Articles & Blog Section)
❌ الوضع السابق (التصميم القديم)
✅ الوضع الحالي (التصميم المطور)
⚙️ المنظور البرمجي والتقني
السابق: هيكلية برمجية تقليدية تفتقر إلى ديناميكية جلب البيانات، مع بطء ملحوظ في تحميل الصور البارزة للمقالات وغياب الربط الذكي للـ Metadata والتواريخ تلقائياً.
الحالي: ربط القسم بنظام استعلامات ووردبريس المطور (WP_Query Dynamic Loop) لجلب أحدث المقالات تلقائياً، مع دعم خاصية التحميل الكسول (Lazy Loading) للصور لرفع تقييم أداء الصفحة.
برمجة التفاعل والمحاذاة: إضافة أكواد تخصيص مرنة تضمن بقاء كروت المقالات متناسقة وموزعة بالتساوي مع دعم التجاوب الفوري (Responsive Flex Layout) على شاشات الهواتف دون تداخل النصوص.
📐 المنظور التصميمي والمظهري
السابق: عرض خطي جاف للمقالات بدون هوية مميزة، مع عناوين صغيرة وألوان تفتقر لروح الفخامة والمظهر المؤسسي للشركات الهندسية الكبرى.
الحالي: تصميم واجهة (Premium UI) يعتمد على تمازج الألوان الهندسية مع خلفية موقع إنشائي مموهة، وإدراج بطاقات مقالات بحواف دائرية انسيابية تحوي تفاصيل متميزة (أيقونة النتيجة الفنية، تاريخ النشر، المقتطف النصي بدقة).
تطوير الـ UI/UX والخطوط: استخدام خطوط عريضة باللون الأخضر الملوكي للعناوين البارزة (مثل: معايير الجودة في المقاولات، التصميم الداخلي، والتصميم المعماري المبتكر)، مما يمنح القارئ تجربة تصفح فاخرة تدفعه لاستكشاف خبرات الشركة الفنية.
الحالي: إلغاء العشوائية البرمجية واستبدالها بربط ديناميكي موجه (Action-Oriented API Dynamic Links) يوجه العميل بضغطة زر واحدة إلى قنوات المحادثة الفورية والاتصال المباشر مع إدارة الشركة.
أتمتة البيانات والخرائط: دمج كود موقع فرع الشركة الجغرافي وحسابات السوشيال ميديا وربط الأرقام بروتوكولات الاتصال الذكي (`tel:` و `mailto:`) لضمان التجاوب السريع والآمن عبر الهواتف الذكية.
📐 المنظور التصميمي والمظهري
السابق: واجهة بيضاء معتمة خالية من أي دلالات بصرية للماركة، مع خطوط صغيرة ونموذج اتصال لا يوحي بهوية شركة هندسية عريقة.
الحالي: تصميم مظهر زجاجي مذهل (Premium Glassmorphism Face) يبرز معلومات التواصل بشكل أيقونات جرافيكية دائرية ذات لون أخضر ملوكي فاخر (العنوان، الهاتف، البريد الإلكتروني) تعزز الموثوقية البصرية للشركة.
تطوير الـ UI/UX والتفاعل: توزيع ذكي لعناصر التواصل وربطها بأزرار حادة مفرغة وممتلئة جذابة هندسياً، مع خلفية داكنة متناسقة تمنح القسم وزناً بصرياً يختم واجهة تصفح العميل باحترافية كاملة أمام الإدارة.
7. قسم تذييل الصفحة الختامي (Footer Section)
❌ الوضع السابق (التصميم القديم)
✅ الوضع الحالي (التصميم المطور)
⚙️ المنظور البرمجي والتقني
السابق: كود هيكلي ثابت ومحدود (Static Static Code) يحتوي على نصوص روابط عادية بدون مرونة ديناميكية في جلب القوائم أو ربط شبكات التواصل.
الحالي: إعادة بناء تذييل الصفحة برمجياً بالكامل ليدعم نظام (WordPress Widgets & Dynamic Menus) مما يسهل تحديث الروابط ديناميكياً من لوحة التحكم في أي وقت.
التكامل البرمجي مع حقوق الملكية: برمجة كود مخصص لجلب تاريخ السنة الحالية تلقائياً مع دمج أكواد متجاوبة بالـ Flexbox لمنع تراكب النصوص أو التفاف القوائم بشكل عشوائي في جميع الشاشات.
📐 المنظور التصميمي والمظهري
السابق: كتلة سوداء باهتة تفتقر إلى الأناقة الفنية، مع توزيع عمودي جاف للمعلومات وغياب كامل للشعار الرسمي للشركة بشكل بارز.
الحالي: مظهر مؤسسي فاخر يعتمد على خلفية داكنة عميقة تتكامل مع الهوية الملوكية للموقع، مع إدراج شعار الشركة (Logo) بدقة عالية، وتوزيع الروابط على شكل 4 أعمدة هندسية متناسقة (نبذة، خدماتنا، روابط سريعة، تواصل معنا).
تطوير الـ UI/UX والتفاعل: تنسيق النصوص بخطوط عريضة مريحة للعين، وتطوير كود الـ Hover للأزرار ليتحول بشكل انسيابي ناعم إلى اللون الأخضر الملوكي، مع إبراز أيقونات التواصل الاجتماعي في الأسفل بطابع جرافيكي يعكس فخامة المشاريع الهندسية للشركة أمام الإدارة.
