BikeHub (Motors Website)

تم تطوير تطبيق ويب حديث لعرض كتالوج الدراجات النارية باستخدام React و Tailwind CSS، مع تصميم متجاوب بالكامل يناسب جميع الأجهزة. يهدف التطبيق إلى تقديم تجربة مستخدم سلسة وجذابة لعشاق الدراجات.

المميزات والوظائف الرئيسية:

الصفحة الرئيسية (Homepage): تحتوي على (Hero Section) يعرض دراجة نارية بخلفية شفافة وعنوان جذاب لمحبي الدراجات، مع بطاقات انتقال سريع إلى الأقسام المختلفة: دراجات MotoGP، أنواع الدراجات، الأعلى تقييماً، وجميع الدراجات.

صفحة الكتالوج (Bike Catalog): تعرض جميع الدراجات في شبكة (Grid) منظمة، مع إظهار اسم الدراجة، نوعها، سعرها (بالجنيه المصري)، صورة مصغرة، وزر "عرض التفاصيل".

صفحة التفاصيل (Bike Detail): صفحة مخصصة لكل دراجة تحتوي على معلومات شاملة: الاسم، الصورة، السعر، النوع، السرعة، مواصفات المحرك، التقييم، الوصف، وزر العودة، بالإضافة إلى إمكانية عرض راكب مشهور مرتبط بالدراجة.

صفحة MotoGP: تعرض قائمة بدراجات السباق والبطولات، مع ترتيب الفائزين وفيديوهات احتفالات لأشهر الدراجين مثل "روسي"، وأشهر الدراجات المستخدمة.

صفحة أنواع الدراجات (Bike Types): تستعرض فئات مختلفة من الدراجات مع أمثلة لكل نوع، وتفاصيل دقيقة عن أسرع دراجة في كل فئة.

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

React مع Hooks لإدارة الحالة.

Tailwind CSS لتصميم واجهات أنيقة وسريعة.

React Router للتنقل بين الصفحات.

بيانات وهمية (Mock JSON) لمحاكاة المحتوى.

مؤشرات تحميل (Loading Spinners) لتحسين تجربة المستخدم.

Framer Motion لإضافة حركات انتقالية سلسة وانسيابية بين الصفحات.

- هيكل المشروع:

تم تنظيم الملفات بشكل احترافي داخل مجلدات منفصلة: pages للمكونات الرئيسية، components للمكونات القابلة لإعادة الاستخدام، data لملفات JSON، وassets للصور والموارد.