صفحة هبوط مع لوحة تحكم

السلام عليكم ورحمة الله وبركاته وبعد

⸻

ملف متطلبات مشروع صفحة الهبوط – أكاديمية Speak Smart

1- معلومات عامة عن المشروع

•اسم المشروع: صفحة هبوط لموقع أكاديمية Speak Smart

•الغرض: تعريف الأكاديمية وخدماتها + استقبال طلبات العملاء + إدارة اشتراكات الطلاب

•اللغة: الموقع باللغة العربية (مع إمكانية دعم الإنجليزية مستقبلاً)

•الأجهزة المستهدفة: كمبيوتر – جوال – تابلت (تصميم متجاوب Responsive)

⸻

2- شروط التنفيذ

1.استضافة ودومين مجاني

•استخدام استضافة مجانية موثوقة (مثل Netlify أو GitHub Pages أو Vercel أو غيرها).

•ربطها بدومين مجاني (مثل Freenom أو أي بديل آخر).

2.تسليم السورس كود

•تسليم جميع الملفات (HTML – CSS – JS – أي ملفات Backend) مع تعليمات تشغيلها.

3.لغة برمجة احترافية ومتقدمة

•يفضل استخدام HTML5 + CSS3 + JavaScript مع Framework حديث مثل React / Vue / Next.js / Angular.

•الباكند لمعالجة النماذج يفضل Node.js أو PHP أو أي بديل سريع وآمن.

4.تجربة مستخدم متسلسلة (Multi-Step Navigation)

•يبدأ العميل بصفحة ترحيب.

•عند النقر على “متابعة” ينتقل إلى الصفحة التالية.

•لا يوجد سحب للشاشة للأعلى أو الأسفل، التنقل فقط بالزر “متابعة”.

•كل صفحة تظهر كاملة على الشاشة (Full Screen View).

5.استقبال طلبات العملاء مباشرة على الإيميل

•أي نموذج تسجيل أو استفسار يتم إرساله فورًا للإيميل المحدد بدون تخزين بيانات على السيرفر.

•يمكن استخدام Formspree أو Formsubmit أو إعداد SMTP مباشر.

6.لوحة تحكم وإدارة اشتراكات الطلاب

•تسجيل الدخول بلوحة تحكم آمنة.

•عرض بيانات الطلاب، حالة الاشتراك، المواعيد، والمدفوعات.

•إمكانية تعديل أو حذف بيانات.

⸻

3- الصفحات المطلوبة

1.صفحة ترحيب

•شعار الأكاديمية + جملة ترحيبية + زر “متابعة”.

2.صفحة تعريفية بالأكاديمية (About)

•تعريف مختصر بالأكاديمية وخدماتها.

•زر “متابعة”.

3.صفحة آلية القبول أول شي اختيار نوع الدورة المطلوبة ثم

•خطوات التسجيل (النص الذي أرسلته).

•زر “متابعة”.

4.صفحة اختبار تحديد المستوى

•عرض تفاصيل الاختبار وأقسامه.

•زر “متابعة”.

5.صفحة الباقات والأسعار

•جدول يوضح الباقات والأسعار وفترة كل باقة.

•زر “متابعة”.

6.صفحة النتائج المتوقعة

•قائمة بالنتائج التي سيحققها الطالب.

•زر “متابعة”.

7.صفحة الشروط والمتطلبات

•شروط تجهيز الطالب قبل بدء الكورس.

•زر “متابعة”.

8.صفحة العقد الإلكتروني

•عرض العقد بصيغة قابلة للتمرير.

•خانة موافقة (Checkbox) + زر “أوافق وأكمل التسجيل”.

9.صفحة تسجيل الطلب (Form Page)

•حقول: الاسم – العمر – البريد – الجوال – المستوى التعليمي.

•زر إرسال → يرسل مباشرة للإيميل.

10.صفحة تأكيد التسجيل

•رسالة شكر وتوضيح أن الإدارة ستتواصل معه.

⸻

4- خصائص لوحة التحكم (Admin Panel)

•تسجيل دخول آمن (اسم مستخدم + كلمة مرور).

•عرض جميع الطلبات الجديدة.

•تعديل بيانات الطلاب.

•وضع حالة الاشتراك (نشط – منتهي – ملغى).

•فلترة الطلبات حسب الباقة أو التاريخ.

•إمكانية تصدير البيانات كملف Excel أو PDF.

⸻

5- مواصفات تقنية إضافية

•تصميم متجاوب (Responsive Design) لجميع الشاشات.

•ألوان الهوية البصرية للأكاديمية (يمكنك تحديدها أو يختارها المبرمج).

•خطوط عربية واضحة (مثل خط “Tajawal” أو “Cairo”).

•سرعة تحميل عالية (تحسين الصور + الكود).

•حماية من السبام في النماذج (reCAPTCHA).

⸻