منصة كورسات تعليمية
تفاصيل العمل
منصة ادراكبلاس هي منصة تعليمية صنعة بواسطة React+Vite
أولًا: الصفحة الرئيسية (Hero Section)
* أول جزء يظهر للزائر
* يحتوي على عنوان قوي يشد الانتباه
* وصف بسيط يوضح فكرة المنصة
* زر واضح مثل "ابدأ الآن"
* يتم إضافة أنيميشن خفيفة لجذب الانتباه عند فتح الصفحة
الهدف: جذب المستخدم في أول ثوانٍ من الدخول
---
قسم الكورسات (Courses Section)
* عرض الكورسات في شكل Cards
* كل كارت يحتوي على:
* صورة الكورس
* اسم الكورس
* السعر
* تقييم (نجوم)
* زر "عرض التفاصيل"
* عند مرور الماوس يظهر تأثير مثل التكبير وإضافة ظل
الهدف: عرض المحتوى بشكل منظم وجذاب
---
قسم المدربين (Instructors Section)
* عرض المدرسين في كروت
* كل مدرس يحتوي على:
* صورة شخصية
* الاسم
* التخصص
* نبذة بسيطة
* عند التمرير تظهر العناصر بشكل تدريجي باستخدام الأنيميشن
الهدف: زيادة الثقة في المنصة
---
آراء المستخدمين (Testimonials)
* عرض تقييمات المستخدمين
* يتم عرضها في شكل Slider يتحرك تلقائيًا
* يحتوي على:
* اسم المستخدم
* رأيه في المنصة
* تقييم بالنجوم
الهدف: إثبات مصداقية الخدمة
---
قسم الأسعار (Pricing Section)
* عرض ثلاث خطط:
* Basic
* Pro
* Premium
* كل خطة تحتوي على:
* السعر
* المميزات
* زر "اشترك الآن"
* يتم تمييز الخطة الأفضل بشكل بصري
الهدف: مساعدة المستخدم على اختيار الخطة المناسبة بسهولة
---
قسم الدعوة لاتخاذ إجراء (CTA)
* رسالة واضحة مثل:
"ابدأ الآن وغيّر مستقبلك"
* زر واضح وجذاب
* يحتوي على أنيميشن لزيادة التفاعل
الهدف: تحويل الزائر إلى عميل
---
الفوتر (Footer)
* روابط مهمة
* أيقونات السوشيال ميديا
* إمكانية إدخال البريد الإلكتروني
الهدف: توفير معلومات إضافية وسهولة الوصول
---
الأنيميشن والتفاعل (Animations)
* عند فتح الصفحة: ظهور تدريجي للعناصر
* عند التمرير: العناصر تظهر بحركة
* عند الضغط: أزرار تفاعلية
* تأثيرات Hover على الكروت
الهدف: جعل الموقع تفاعليًا وجذابًا
---
التصميم المتجاوب (Responsive Design)
* يعمل على:
* الموبايل
* التابلت
* الكمبيوتر
* ترتيب العناصر يتغير تلقائيًا حسب حجم الشاشة
الهدف: تقديم تجربة مستخدم ممتازة على جميع الأجهزة
---
تحسين تجربة المستخدم (UX)
* شريط تنقل ثابت لسهولة الاستخدام
* قائمة موبايل منظمة
* تنقل سلس بين الأقسام
* سرعة تحميل عالية
الهدف: تسهيل استخدام الموقع وتحسين تجربة الزائر
---
التقنيات المستخدمة
* React.js
* Tailwind CSS
* Framer Motion
الهدف: تقديم أداء قوي وكود منظم وسهل التطوير
---
الهدف النهائي من المشروع
إنشاء صفحة احترافية تعكس شكل منصة تعليم حقيقية، تساعد على جذب العملاء، وتكون جاهزة للاستخدام أو التطوير لاحقًا.