قارن بين الأنواع الأربعة من حيث الرسوم والمزايا، واطّلع على التفاصيل الكاملة لكل نوع قبل التقديم. الرسوم المعروضة شاملة ضريبة القيمة المضافة ١٥٪، والعضوية سارية لمدة سنة ميلادية واحدة قابلة للتجديد.
لا توجد أنواع عضوية معروضة حاليًا.
غير متأكد من النوع المناسب؟فريق العضويات يسعد بمساعدتك في اختيار النوع الأنسب لنشاطك أو منشأتك قبل التقديم.
نوع الشاشة: عرض ومقارنةالصلاحية: عامة — زائرالأنواع: ٤صفوف المقارنة: ١٤
1الغرض والنطاق
تكمل الرئيسية بعرض أكثر تفصيلًا لأنواع العضوية الأربعة: بطاقات موسّعة (بمدة السريان) بالإضافة إلى جدول مقارنة شامل يعرض كل مزايا الأنواع الأربعة جنبًا إلى جنب، ليختار الزائر النوع المناسب قبل الانتقال للتقديم.
2المكوّنات والتخطيط
رأس الصفحة (Pagehead): مسار تنقّل (Breadcrumb) + عنوان + وصف قصير
شبكة بطاقات الأنواع: نفس بطاقات الرئيسية (السعر + ٥ مزايا) مع إضافة سطر "مدة السريان"، وبطاقة "الذهبية" مميّزة بوسم "الأكثر طلبًا"
شريط مساعدة: "غير متأكد من النوع المناسب؟" مع زر تواصل مع الفريق
CTA ختامي: دعوة للتقديم + رابط لجدول الرسوم الكامل
3السلوك والتفاعلات
جدول المقارنة يُبنى بالكامل من JS من مصفوفة بيانات واحدة (كل صف: تسمية الميزة + قيمة لكل نوع: true/false/نص مثل "حتى ١٠")؛ لا يوجد HTML ثابت للصفوف
الجدول له عرض أدنى ٧٦٠px — على الشاشات الأضيق يظهر تمرير أفقي داخل بطاقة الجدول بدل كسر تخطيط الصفحة
بطاقات الأنواع الأربع كلها روابط بسيطة (لا نوافذ منبثقة ولا تحميل ديناميكي)
4القواعد والتحقق
مهم جدًا: بيانات الأسعار والمزايا في بطاقات هذه الشاشة وجدول المقارنة يجب أن تبقى مطابقة حرفيًا لنفس البيانات في P01 وP03 وP05 — أي تعديل مستقبلي على سعر أو ميزة نوع عضوية يجب تطبيقه في هذه الشاشات الأربع معًا، وإلا ظهر تضارب أمام المستخدم
5حالات الشاشة
شاشة عرض ثابتة بالكامل في هذا النموذج، لا حالة تحميل أو خطأ حاليًا
في التنفيذ الفعلي، إذا كانت الأسعار/المزايا قابلة للتعديل الإداري، يجب جلب بيانات البطاقات والجدول من API بدل تثبيتها في الكود، مع Skeleton أثناء التحميل الأول
6البيانات والحالات
مدخلات: لا يوجد
بيانات للجلب من API في التنفيذ الحقيقي: قائمة أنواع العضوية (الاسم، السعر، المدة)، ومصفوفة توفّر كل ميزة لكل نوع
7التنقّل والارتباطات
كل بطاقات الأنواع الأربع وأزرار "التفاصيل والتقديم" ضمنها ← P03_type_details.html
"تحدّث مع الفريق" في شريط المساعدة ← P07_contact.html
"جدول الرسوم الكامل" ← P05_fees.html
زر "تقديم طلب عضوية" (الترويسة وCTA) ← M07_apply_select.html
8ملاحظات التنفيذ
ملاحظة دقة: روابط بطاقات الأنواع الأربعة إلى P03 في التصميم الأصلي لا تمرّر نوع العضوية (رابط ثابت بلا معامل) — بمعنى أن الضغط على أي بطاقة كان يفتح P03 دائمًا على "الذهبية" افتراضيًا. التنفيذ الفعلي هنا يصحّح هذا: كل بطاقة تربط بمسار النوع الصحيح الخاص بها
عمود "الذهبية" مميَّز حاليًا بموضع ثابت (index=1) لأنه الأكثر طلبًا؛ لو تغيّر النوع الأكثر طلبًا مستقبلًا بناءً على بيانات فعلية، يجب أن يصبح هذا التمييز ديناميكيًا لا ثابتًا في الكود