FORMA - موقع خطط التمرين والتغذية المخصص
تفاصيل العمل
الفكرة الأساسية
موقع يقدّم خطط تمرين ونظام غذائي مخصص لكل مستخدم حسب العمر، بحيث يكون سهل الاستخدام وواضح للجميع، من المراهقين للكبار، ويحتوي على محتوى غني بالفيديوهات التوضيحية.
---
واجهة المستخدم (UI)
تصميم عصري ومنوّر: خلفية متدرجة الألوان مع تأثير Glassmorphism للكروت، يعطي إحساس احترافي وجاذب للنظر.
كارت مركزي يسأل المستخدم عن العمر عند الدخول، مع قائمة منسدلة واضحة وزر “ابدأ”.
كروت لكل خطة بعد اختيار العمر، تعرض التمارين والنظام الغذائي مع توضيح التكلفة لكل خطة.
ألوان متناسقة وتباين واضح لتسهيل القراءة والتركيز على العناصر الأساسية.
---
تجربة المستخدم (UX)
Popup أولي لاختيار العمر يحدد المحتوى المناسب تلقائيًا.
تقسيم الأعمار: 10–17، 18–25، 26–35، 36–45، 46+، لتغطية مختلف الفئات العمرية.
ترتيب منطقي للخطط: التمارين أولًا، ثم النظام الغذائي، كل خطة في كارت مستقل.
زر واضح وبارز لبدء التجربة، مع إمكانية العودة لاحقًا لتغيير العمر.
---
المحتوى التفاعلي
تمارين فيديو: كل خطة تمرين تحتوي على فيديو يوضح كيفية أداء التمرين بشكل صحيح.
نظام غذائي: خطة غذائية مبسطة مع توضيح نوعية الوجبات المناسبة لكل فئة عمرية.
تكلفة الخطط: توضيح تكلفة كل خطة (قليل التكلفة أو متوسط) لمساعدة المستخدم على اتخاذ القرار.
---
الاستجابة (Responsive)
التصميم يتأقلم تلقائيًا مع جميع الأجهزة: كمبيوتر، موبايل، تابلت.
الكروت والأزرار تتحرك وتترتب بشكل مناسب عند تصغير الشاشة.
---
الحركة والتأثيرات
أنيميشن ظهور Popup عند تحميل الموقع.
تأثير Hover على الكروت يعطي إحساس ديناميكي وحيوي.
انتقالات ناعمة عند فتح صفحة الخطط بعد اختيار العمر.
---
الجوانب التقنية
HTML + CSS + JavaScript نظيفة ومنظمة.
JavaScript للتحكم بعرض الخطط بناءً على العمر المختار.
جاهز للربط مع أي Back-End أو API لإضافة بيانات أكثر أو حفظ تقدم المستخدم.
سهل التطوير والإضافة: يمكن إدراج تمارين إضافية، صور، نصائح غذائية، أو أي محتوى تفاعلي إضافي.
---
القيمة للعميل
موقع متكامل يوفّر تجربة تعليمية وترفيهية.
يسهل على المستخدم معرفة التمارين المناسبة والنظام الغذائي حسب عمره.
تصميم حديث يعطي انطباع احترافي ويزيد من مصداقية الخدمة.
محتوى غني بالفيديوهات، تجربة سلسة للمستخدم، وواجهة جذابة.