موقع شركة جَزَل مع لوحة تحكم ديناميكية لإدارة المحتوى (React + Firebase)

الموقع مبني كواجهة أمامية حديثة باستخدام React 18 مع منظومة Vite للتطوير والبناء السريع، ويعتمد على حزمة واسعة من مكونات Radix UI، وFramer Motion، وTailwind CSS لتقديم تجربة مستخدم غنية وسلسة.

يتم ضبط البيانات الوصفية ومحرك البحث من خلال react-helmet مباشرة داخل الطبقة الأساسية للتطبيق، مع تحميل كل أقسام الصفحة من خلال مكوّن رئيسي واحد يضمن التكامل بين الأقسام المختلفة.

البنية الأمامية وتجربة التصميم

التصميم قائم على Tailwind CSS مع نظام ألوان وهوية بصرية موسعة في ملف الإعدادات، بما في ذلك تدرجات لونية ذهبية ومحارف مستجيبة، إلى جانب حركات جاهزة (plugins) لتعزيز تفاعلات الأكورديون وغيرها.

قسم الترويسة (Header) يعتمد على Framer Motion لتوليد انتقالات متقدمة بين العناصر، مع قائمة تنقل ديناميكية، ودعم للوضع المتجاوب، وأيقونات Lucide-react لضمان اتساق الهوية البصرية.

إدارة المحتوى وتعدد اللغات

التطبيق يغلّف جميع الصفحات ضمن LanguageProvider ليضبط لغة المستند واتجاهه تلقائياً، ويستدعي الحقول النصية من كائن الترجمات الموحد، ما يضمن إدارة مركزية لجميع النصوص.

يتم تحميل الترجمات من Firestore عند تشغيل التطبيق مع الاحتفاظ بنسخة افتراضية، ثم يبدأ الاستماع للتحديثات اللحظية عبر onSnapshot لضمان مزامنة المحتوى على الفور، مع إمكان التحديث والدمج العميق للبيانات متعددة اللغات.

التكامل مع Firebase والبنية الخلفية

تم تهيئة Firebase بكامل خدماته (Firestore، Auth، Storage، Analytics) وتوفير خدمة مخصصة للتعامل مع البيانات بما يشمل الدمج العميق، التحقق من الحفظ، وإدارة الملفات داخل التخزين السحابي.

واجهات التفاعل وقنوات التواصل

نموذج التواصل يوجّه الرسائل مباشرة إلى WhatsApp بعد توليد نص منسق، مع تحكم كامل في حالات الإرسال، ودمج لخريطة Google داخل نفس القسم لعرض موقع الشركة.

يوجد زر عائم مخصص لفتح محادثة WhatsApp بسرعة، يستمد رقم الاتصال من الترجمات لضمان توافقه مع اللغة المختارة وإمكانية تحديثه من لوحة الإدارة.