Mercedes-Benz باستخدام React

1. الأهداف:

توفير واجهة مستخدم ديناميكية وجذابة تبرز الابتكار والأناقة المرتبطة بعلامة Mercedes-Benz.

تصميم واجهة تركز على المستخدم مع تغييرات تلقائية (مثل النصوص والخلفيات المتغيرة).

تقديم تجربة سلسة واستجابة عالية عبر ميزات مثل تشغيل الفيديو، التنقل بين الشرائح، والأزرار التفاعلية.

2. التقنيات المستخدمة:

React.js: لإدارة واجهة المستخدم والتحديثات الديناميكية (مثل النصوص والخلفيات).

CSS (مع الرسوم المتحركة): لإضافة لمسات جمالية مثل تأثيرات fade-in.

HTML: لإنشاء الهيكل الأساسي للصفحة.

Assets (صور وفيديوهات): لإبراز هوية الشركة وتمثيل عناصرها البصرية (مثل السيارات الفاخرة).

3. مميزات المشروع:

خلفية ديناميكية: تتغير بين الفيديوهات والصور حسب حالة تشغيل الفيديو أو عداد الشرائح.

نظام النصوص الديناميكية: يتم عرض جمل مختلفة تمثل رؤية ومميزات Mercedes-Benz باستخدام عداد يتم تغييره تلقائيًا كل 3 ثوانٍ.

شريط تنقل (Navbar): يحتوي على قائمة مختصرة بأقسام الموقع مثل (الرئيسية، الاستكشاف، حول، واتصل بنا).

تصميم متجاوب (Responsive Design): لجعل الواجهة تعمل بشكل مثالي على الأجهزة المختلفة (الهواتف، الأجهزة اللوحية، الشاشات الكبيرة).

إمكانية تشغيل وإيقاف الفيديو: زر تشغيل/إيقاف للتحكم في الفيديو الخلفي وإضافة عنصر تفاعلي.