موقع هندسي وإنشائي
Architecture Beats
موقع شركة ثنائي اللغة يعتمد على الحركة لعرض الخدمات المعمارية ومشاريع التنفيذ والفريق ومراحل العمل والإحصائيات وإجراءات التواصل على الموبايل.
الدور
مطور Frontend
التقنيات
01 / نظرة عامة
Architecture Beats حضور رقمي متكامل لمكتب معماري وإنشائي، يجمع اكتشاف الخدمات وعرض المشاريع وبناء الثقة عبر الإحصائيات والفريق ومسارات التواصل ضمن هوية حادة باللغتين العربية والإنكليزية.
02 / التحدي
كان المطلوب إظهار جودة التصميم ومصداقية التنفيذ بدون أن يبدو الموقع كبروشور جامد، مع دعم اتجاهي القراءة والثيم الفاتح والداكن وحركة غنية وإجراءات موبايل عملية، وبقاء محتوى الشركة سهل الإدارة.
03 / الحل
بنيت واجهة Next.js تعتمد على بيانات مركزية ثنائية اللغة وأقسام قابلة لإعادة الاستخدام وContext للغة والثيم وطبقة حركة مشتركة. استخدمت Framer Motion للتفاعلات والدخول وLenis للتمرير السلس، مع إجراءات تواصل مخصصة للموبايل تجعل الموقع عملياً إلى جانب عرضه البصري.
04 / الأساليب ومكان تطبيقها
ليس فقط ماذا استُخدم، بل أين ولماذا.
الأسلوب
محتوى مركزي مبني على البيانات
أين طُبّق؟
بيانات الشركة والتنقل والخدمات والمشاريع والإحصائيات والفريق والأسئلة والهوية والـSEO موجودة ضمن src/data/siteData.ts.
الأسلوب
تعدد لغات باستخدام Context
أين طُبّق؟
LocaleContext يبدّل المحتوى العربي والإنكليزي ويحدث lang وdir ويحفظ اللغة المختارة في localStorage.
الأسلوب
نظام ثيم عبر CSS Variables
أين طُبّق؟
ThemeContext يتحكم بالشكل الفاتح والداكن في الأقسام والبطاقات والنماذج والفوتر وشاشة التحميل مع حفظ الاختيار.
الأسلوب
نظام حركة متعدد الطبقات
أين طُبّق؟
Framer Motion للدخول والتفاعلات وLenis للتمرير السلس، مع ScrollProgress وCursorFollower وPageLoadGate كتجربة عامة.
الأسلوب
إجراءات متجاوبة حسب الجهاز
أين طُبّق؟
واتساب عائم على الديسكتوب وشريط إجراءات سفلي على الموبايل بدون تكرار مزعج لنفس التحكم.
الأسلوب
استراتيجية Metadata كاملة
أين طُبّق؟
الـlayout يضم Canonical وOpen Graph وTwitter والأيقونات وrobots والكلمات المفتاحية والتموضع الدلالي للمجال الهندسي.
05 / الميزات الرئيسية
القدرات الأساسية التي بُني عليها Architecture Beats.
محتوى عربي وإنكليزي مع تبديل RTL وLTR
ثيم فاتح وداكن محفوظ بين الزيارات
أقسام الخدمات والمراحل والمشاريع والإحصائيات والفريق والأسئلة والتواصل
تمرير سلس ومؤشر تقدم وتجربة تحميل ومؤشر ماوس تفاعلي
شريط إجراءات للموبايل وتواصل مباشر عبر واتساب
Open Graph وTwitter وrobots والأيقونات وCanonical وإعدادات Google Bot
06 / مقالات مرتبطة