CodeCraft Academy | منصة تفاعلية لتعليم البرمجة للأطفال

قمت بتصميم وتطوير موقع CodeCraft Academy، وهي أكاديمية متخصصة في إعداد جيل جديد من المبرمجين الصغار.

الهدف الرئيسي من المشروع كان بناء تجربة مستخدم (UX) ممتعة وسهلة، حيث تم تحويل المناهج التعليمية المعقدة (مثل Python و Game Design) إلى رحلة بصرية شيقة. ركزت في التصميم على مخاطبة عقلية الطفل من خلال الألوان الحيوية والرسوم التوضيحية، مع توفير لوحة تحكم واضحة لأولياء الأمور لمتابعة مسار أبنائهم التعليمي والاشتراك في الباقات."

4. أبرز المميزات (Key Features)

(مستخرج بدقة من تفاصيل الصور التي أرفقتها):

رحلة التعلم (Learning Journey): تصميم تسلسل بصري (Roadmap) يوضح خطوات تطور الطالب من "الأساسيات" وصولاً إلى "مستقل" أو "مطور ألعاب"، مما يحفز الطالب على الاستمرار.

باقات اشتراك مخصصة: عرض دورات مثل (Python Junior, Roblox Developer) في بطاقات تسعير (Pricing Cards) واضحة توضح السعر، عدد الحصص، والمميزات.

معرض مشاريع الطلاب: قسم تفاعلي يعرض الألعاب التي برمجها الطلاب (مثل Space Shooter)، لزيادة مصداقية الأكاديمية وتحفيز المشتركين الجدد.

إحصائيات حية: عدادات رقمية متحركة تعرض عدد الطلاب، المشاريع، وساعات البرمجة.

قسم الأسئلة الشائعة (FAQ): تصميم قائمة منسدلة (Accordion) للإجابة على تساؤلات أولياء الأمور بشكل منظم وسلس.

تصميم متجاوب كلياً (Fully Responsive): تجربة تصفح مثالية على التابلت والموبايل والكمبيوتر.

5. التقنيات المستخدمة (Tech Stack)

React.js & Next.js: لبناء تطبيق ويب سريع جداً (SPA) وصديق لمحركات البحث (SEO).

Tailwind CSS: لتنسيق الواجهة بتصميمات مخصصة (Custom Design) وألوان متدرجة (Gradients) عصرية.

Framer Motion (اختياري): لإضافة تأثيرات حركية ناعمة عند التمرير (Scroll Animations).

React Icons: لاستخدام أيقونات خفيفة ومعبرة.