Remix

Make your own version of المهارة العربية للأمن والسلامة (Remix)

Get an exact, working copy in your account, then change anything with chat.

Original by العباد هائل

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# مشروع إنشاء موقع مؤسسي احترافي لمؤسسة المهارة العربية للأمن والسلامة

أريد منك العمل بصفتك فريقًا متكاملًا من خبراء تصميم المواقع المؤسسية، وتجربة المستخدم UI/UX، وتطوير الأنظمة، والأمن السيبراني، وتحسين محركات البحث SEO. أنشئ موقعًا إلكترونيًا متكاملًا ومتعدد الصفحات لمؤسسة المهارة العربية للأمن والسلامة، بجودة تصميم وتنفيذ عالية جدًا، ينافس أفضل مواقع شركات الأمن والسلامة ومكافحة الحريق في المملكة العربية السعودية.

**المطلوب تنفيذ موقع حقيقي متكامل وجاهز للنشر، وليس نموذجًا بصريًا أو صفحة هبوط واحدة.**

## 1. هوية المؤسسة

الاسم العربي: مؤسسة المهارة العربية للأمن والسلامة.

الاسم الإنجليزي: Arabian Skill Safety & Security EST.

البريد الإلكتروني: arabian-skil@outlook.com

رقم الجوال: 0557919866

الموقع: المملكة العربية السعودية، الرياض، نمار، طريق ديراب، 6246.

اعتمد الشعار المرفق كما هو تمامًا، وحافظ على هويته الأصلية دون إعادة رسمه أو تغيير نسبه أو ألوانه أو النصوص الموجودة فيه.

ألوان الهوية الأساسية:
- الأحمر: قريب من #E50914.
- الأسود: #050505.
- الرمادي الفضي: قريب من #858585.
- الأبيض: #FFFFFF.

اجعل التصميم عربيًا افتراضيًا باتجاه RTL، مع إمكانية توفير نسخة إنجليزية كاملة باتجاه LTR، تشمل الصفحات والخدمات والنماذج وبيانات التواصل، وليس مجرد ترجمة عناوين القائمة.

## 2. التوجه التصميمي

أنشئ هوية رقمية فاخرة، عصرية، هندسية، احترافية، تناسب مؤسسة متخصصة في الأمن والسلامة وأنظمة الحماية من الحريق.

استخدم:
- واجهة رئيسية قوية بصور واقعية عالية الجودة لمشاريع أنظمة الحريق والمنشآت والفنيين أثناء العمل.
- مساحات بيضاء مدروسة وتباين واضح بين الأسود والأحمر والرمادي.
- خطوط عربية احترافية وواضحة، مثل IBM Plex Sans Arabic أو ما يعادلها.
- أيقونات هندسية موحدة ومتناسقة.
- بطاقات خدمات أنيقة، وصور مشاريع احترافية، وانتقالات حركية خفيفة.
- تصميم متجاوب بالكامل مع الكمبيوتر والتابلت والجوال.
- قوائم تنقل واضحة، وتذييل غني بالمعلومات، وأزرار بارزة لطلب عرض السعر والتواصل.

تجنب القوالب التجارية المكررة، والتصميم المزدحم، والتدرجات اللونية المبالغ فيها، والصور غير المرتبطة بالنشاط.

لا تضع نصوصًا تجريبية أو صورًا عشوائية أو بيانات عملاء وهمية. استخدم محتوى عربيًا مهنيًا خاصًا بالنشاط، واجعل أي معلومات غير متوفرة قابلة للإضافة من لوحة التحكم.

## 3. هيكل الموقع والصفحات

أنشئ الصفحات التالية على الأقل، مع رابط مستقل لكل صفحة وعناوين URL واضحة وقابلة للفهرسة.

### أ. الصفحة الرئيسية
- شريط علوي يحتوي على الشعار وبيانات التواصل.
- قائمة رئيسية منظمة للخدمات والمشاريع ومن نحن والمقالات والتواصل.
- واجهة رئيسية تحتوي على عنوان تسويقي قوي، ووصف مختصر، وزري «استكشف خدماتنا» و«اطلب عرض سعر».
- قسم تعريفي بالمؤسسة.
- قسم الخدمات الرئيسية مع صورة ووصف ورابط مستقل لكل خدمة.
- قسم يوضح الحلول المتكاملة من التصميم والتوريد إلى التركيب والاختبار والصيانة.
- قسم القطاعات التي تخدمها المؤسسة.
- قسم المشاريع والأعمال المنفذة.
- قسم يوضح مراحل العمل من استلام الطلب إلى التسليم.
- قسم يبرز نقاط القوة الفعلية للمؤسسة.
- قسم للأسئلة الشائعة.
- دعوة واضحة للتواصل وطلب عرض سعر.
- تذييل احترافي يتضمن روابط الموقع وبيانات التواصل ومعلومات المؤسسة.

### ب. صفحة من نحن
- نبذة عن المؤسسة.
- الرؤية والرسالة والقيم.
- منهجية العمل وضمان الجودة.
- نطاق الخدمات والتخصصات.
- فريق العمل عند توفر بياناته وصوره.
- بيانات التراخيص والاعتمادات فقط بعد إدخال بيانات صحيحة والتحقق منها.

### ج. صفحات الخدمات

أنشئ صفحة رئيسية للخدمات وصفحة مستقلة قابلة للتوسع لكل خدمة من الخدمات التالية:

1. أنظمة إنذار وكشف الحريق.
2. أنظمة مكافحة وإطفاء الحريق.
3. شبكات ومضخات الحريق.
4. أنظمة الرش الآلي بالمياه.
5. أنظمة الإطفاء بالغازات النظيفة والأنظمة المتخصصة.
6. صيانة أنظمة الإنذار والإطفاء.
7. فحص وصيانة وإعادة تعبئة طفايات الحريق.
8. عقود الصيانة الدورية للمنشآت.
9. توريد وتركيب معدات الأمن والسلامة.
10. مخططات السلامة والتصميمات الفنية.
11. التقارير الفنية وتقارير الفحص.
12. خدمات شهادات السلامة والتراخيص ذات الصلة، بحسب الخدمات التي تقدمها المؤسسة فعليًا.
13. أنظمة كاميرات المراقبة والأمن، إذا كانت ضمن نطاق نشاط المؤسسة.
14. حلول السلامة للمصانع والمستودعات والمباني التجارية والسكنية.

كل صفحة خدمة يجب أن تتضمن:
- عنوانًا ووصفًا احترافيًا خاصًا بالخدمة.
- صورة رئيسية مناسبة.
- شرحًا لنطاق الخدمة وأهميتها.
- الأنظمة والمعدات ذات الصلة.
- خطوات تنفيذ الخدمة.
- القطاعات والمنشآت المناسبة لها.
- صورًا أو مشاريع مرتبطة بها عند توفرها.
- أسئلة شائعة خاصة بالخدمة.
- زر طلب عرض سعر أو معاينة.
- خدمات ذات صلة.
- إعدادات SEO مستقلة.
- إمكانية تعديل جميع محتويات الصفحة وصورها من لوحة التحكم.

لا تعرض أي خدمة باعتبارها معتمدة رسميًا، ولا تدّعِ امتلاك شهادات أو تراخيص أو اعتمادات غير مثبتة.

### د. صفحة المشاريع والأعمال
- معرض مشاريع بتصميم احترافي.
- إمكانية تصنيف المشاريع حسب نوع المنشأة والخدمة والقطاع.
- صورة غلاف لكل مشروع.
- صفحة تفاصيل مستقلة لكل مشروع.
- اسم المشروع والمدينة والقطاع ونطاق العمل والأنظمة المنفذة وتاريخ المشروع، عند توفر البيانات.
- معرض صور قبل التنفيذ وبعده عند توفرها.
- إمكانية إضافة الصور وتغيير ترتيبها وحذفها من لوحة الإدارة.
- إمكانية إخفاء المشاريع غير المنشورة.
- عدم اختلاق مشاريع أو أسماء عملاء أو صور توحي بتنفيذ أعمال غير حقيقية.

### هـ. صفحة القطاعات التي نخدمها
أنشئ صفحات أو أقسامًا قابلة للتوسع لخدمة:
- المصانع والمنشآت الصناعية.
- المستودعات والمراكز اللوجستية.
- المباني التجارية والإدارية.
- المجمعات والمراكز التجارية.
- المباني السكنية.
- المنشآت التعليمية والصحية.
- المقاولين والمطورين العقاريين.
- المنشآت الحكومية، عند ملاءمة نطاق العمل.

اجعل لكل قطاع وصفًا يوضح احتياجات السلامة الخاصة به والخدمات المناسبة له.

### و. صفحة طلب عرض سعر
أنشئ نموذجًا احترافيًا يتضمن:
- اسم العميل أو المنشأة.
- اسم مسؤول التواصل.
- رقم الجوال.
- البريد الإلكتروني.
- المدينة وموقع المشروع.
- نوع المنشأة.
- الخدمة المطلوبة.
- وصف المشروع والاحتياج.
- إمكانية إرفاق ملفات وصور ومخططات.
- الموافقة على سياسة الخصوصية.
- زر إرسال الطلب.

عند إرسال الطلب، تحقق من البيانات، واحفظ الطلب فعليًا في قاعدة البيانات، واعرض تأكيدًا واضحًا للمستخدم.

يجب أن يظهر الطلب في لوحة تحكم المالك، مع رقم مرجعي وحالة الطلب وتاريخ الاستلام، وإمكانية تحديث حالته وتسجيل الملاحظات والتواصل مع العميل.

أضف حماية من الرسائل المزعجة والتحقق من الملفات المرفقة.

### ز. صفحات إضافية
أنشئ:
- صفحة تواصل معنا.
- صفحة الأسئلة الشائعة.
- صفحة المقالات والأخبار.
- صفحة تفاصيل المقال.
- صفحة سياسة الخصوصية.
- صفحة الشروط والأحكام.
- صفحة 404 احترافية.
- صفحة بحث داخلية عند الحاجة.

يجب أن تكون المقالات قابلة للإدارة والنشر والتصنيف من لوحة التحكم، مع دعم الصور والعناوين والوصف ومحركات البحث.

## 4. لوحة تحكم المالك — أهم جزء في المشروع

أريد لوحة تحكم إدارية حقيقية ومتكاملة، وليست مجرد صفحة شكلية.

أنشئ لوحة تحكم منفصلة وآمنة، مع تسجيل دخول محمي، بحيث أستطيع إدارة الموقع بالكامل دون تعديل ملفات الكود.

### إدارة محتوى الموقع
يجب أن أتمكن من:
- تعديل كل النصوص والعناوين والأوصاف.
- تعديل الصور الرئيسية وصور الأقسام والخلفيات.
- رفع الصور واستبدالها وحذفها وإعادة ترتيبها.
- تغيير الشعار عند الحاجة مع الحفاظ على الهوية الحالية افتراضيًا.
- تعديل معلومات التواصل والعنوان والبريد والجوال.
- تعديل القوائم والروابط وترتيب عناصرها.
- تعديل محتوى التذييل والروابط الاجتماعية.
- التحكم في الأزرار وأسمائها وروابطها.
- إظهار الأقسام أو إخفاؤها.
- إضافة أقسام جديدة أو إعادة ترتيب الأقسام القابلة للتخصيص.
- تغيير ألوان الواجهة وبعض إعدادات التصميم من لوحة الإدارة.
- إدارة النسخة العربية والإنجليزية كلٌ على حدة.

### إدارة الصفحات والخدمات
- إضافة الصفحات وتعديلها وحذفها.
- إنشاء صفحات خدمات جديدة دون برمجة.
- تعديل وصف الخدمة وصورها ومميزاتها والأسئلة الشائعة الخاصة بها.
- تحديد الخدمات ذات الصلة.
- حفظ الصفحة كمسودة أو نشرها أو إلغاء نشرها.
- معاينة التغييرات قبل النشر.
- إدارة ترتيب الصفحات في القائمة الرئيسية.
- تخصيص عنوان URL وعنوان SEO والوصف التعريفي لكل صفحة.

### إدارة المشاريع
- إضافة مشروع وتعديل بياناته وصوره.
- إنشاء معرض صور متعدد لكل مشروع.
- تحديد نوع المشروع والقطاع والخدمات المرتبطة به.
- التحكم في نشر المشروع وترتيبه في الصفحة الرئيسية.
- إضافة صور الغلاف والتفاصيل والنصوص التوضيحية.

### إدارة الصور والملفات
أنشئ مكتبة وسائط مركزية تعرض الصور والملفات المستخدمة في الموقع، مع إمكانية رفعها وتنظيمها واستبدالها وإعادة استخدامها.

وفر ضغطًا مناسبًا للصور، ودعم WebP عند الإمكان، وإمكانية كتابة النص البديل للصور لتحسين الوصول وSEO.

لا تسمح بحذف ملف مستخدم في صفحة أخرى دون تحذير واضح.

### إدارة طلبات العملاء
- عرض جميع طلبات عروض الأسعار في جدول منظم.
- البحث والتصفية حسب التاريخ والخدمة والحالة.
- فتح تفاصيل كل طلب ومرفقاته.
- تحديث الحالة: جديد، قيد المراجعة، تم التواصل، تم إرسال العرض، مكتمل، ملغي.
- إضافة ملاحظات داخلية.
- تصدير الطلبات إلى CSV أو Excel.
- إمكانية طباعة تفاصيل الطلب.
- إظهار عدد الطلبات الجديدة في لوحة التحكم.
- المحافظة على سرية بيانات العملاء وعدم عرضها للزوار.

### إدارة المقالات
إضافة المقالات وتعديلها وتصنيفها ونشرها وجدولتها، مع محرر محتوى سهل الاستخدام، وصورة رئيسية، وبيانات SEO، ومعاينة قبل النشر.

### إعدادات عامة
- إعدادات الموقع واللغة والمنطقة الزمنية.
- إدارة بيانات التواصل.
- إعدادات SEO العامة.
- إدارة روابط الشبكات الاجتماعية.
- إدارة ملفات Sitemap وRobots عند الحاجة.
- إعدادات البريد الإلكتروني للإشعارات.
- إعدادات النسخ الاحتياطي والاستعادة بحسب إمكانات الاستضافة.
- إدارة المستخدمين الإداريين والصلاحيات عند الحاجة.
- سجل للعمليات الإدارية المهمة، مثل تعديل المحتوى وحذف البيانات وتغيير الصلاحيات.

## 5. متطلبات تقنية إلزامية

اختر بنية تقنية مناسبة ومستقرة ومتوافقة مع بيئة النشر المستهدفة، مع توضيح الاختيارات قبل التنفيذ.

يجب أن يتضمن المشروع:
- واجهة أمامية احترافية.
- خادمًا خلفيًا فعليًا عند الحاجة.
- قاعدة بيانات دائمة.
- نظام مصادقة آمن للوحة التحكم.
- صلاحيات تمنع المستخدم غير المصرح له من الوصول إلى الإدارة.
- تخزينًا موثوقًا للصور والملفات.
- واجهات API محمية عند استخدامها.
- تحققًا من البيانات في الخادم، وليس في الواجهة فقط.
- حماية من هجمات XSS وCSRF وحقن SQL بحسب التقنية المستخدمة.
- إدارة آمنة للأسرار ومفاتيح الخدمات.
- نسخًا احتياطيًا موثقًا وخطة لاستعادة البيانات.
- تصميمًا متوافقًا مع الجوال والشاشات المختلفة.
- معالجة صحيحة للأخطاء ورسائل واضحة للمستخدم.

لا تستخدم LocalStorage أو SessionStorage باعتبارهما قاعدة البيانات الأساسية للموقع أو طلبات العملاء أو المحتوى الإداري.

لا تستخدم بيانات وهمية على أنها بيانات حقيقية، ولا تجعل النماذج أو أزرار الحفظ أو الرفع أو الحذف شكلية.

إذا اخترت نظام إدارة محتوى مثل WordPress أو نظامًا مخصصًا، فيجب أن تكون إدارة الموقع الفعلية متوافقة مع التقنية المختارة، وألا تعتمد على واجهة إدارية لا تحفظ التعديلات بصورة دائمة.

## 6. تحسين محركات البحث SEO

جهز الموقع ليستهدف العملاء الباحثين عن خدمات الأمن والسلامة في الرياض والمملكة العربية السعودية.

- عناوين وأوصاف Meta مستقلة لكل صفحة.
- روابط URL واضحة.
- بنية عناوين H1 وH2 وH3 صحيحة.
- بيانات منظمة مناسبة لنوع المؤسسة والخدمات والأسئلة الشائعة حيث تنطبق.
- خريطة Sitemap XML.
- إعداد Robots.txt بصورة صحيحة.
- روابط داخلية بين الخدمات والمشاريع والمقالات.
- صور محسنة مع نصوص بديلة مناسبة.
- دعم Google Search Console عند ربط الحساب.
- دعم Google Analytics أو أداة تحليلات مناسبة بعد إعدادها.
- عدم وضع بيانات منظمة أو تقييمات أو معلومات اعتماد غير حقيقية.
- تجنب تكرار المحتوى بين صفحات الخدمات.

## 7. الأداء وتجربة المستخدم

استهدف:
- سرعة تحميل عالية.
- تجربة ممتازة على الجوال.
- ضغط الصور والملفات.
- تحميل الصور عند الحاجة.
- تقليل JavaScript وCSS غير الضروريين.
- سهولة التنقل والوصول إلى بيانات التواصل.
- وضوح الخطوط العربية والتباين.
- إمكانية استخدام لوحة الإدارة دون خبرة برمجية.

أضف زر اتصال مباشر وزر واتساب ثابتًا أو عائمًا بصورة أنيقة، مع استخدام رقم المؤسسة المحدد في بيانات الموقع، وإمكانية تعديل الرقم من لوحة التحكم.

## 8. اختبار المشروع قبل التسليم

لا تعتبر المشروع مكتملًا بمجرد عرض الصفحة الرئيسية.

اختبر فعليًا ما يلي:
1. عمل جميع الصفحات والروابط.
2. نجاح تسجيل الدخول والخروج من لوحة الإدارة.
3. حفظ تعديلات النصوص والصور في قاعدة البيانات.
4. استمرار ظهور التعديلات بعد تحديث الصفحة وإعادة فتح الموقع.
5. إضافة خدمة جديدة ونشرها ثم تعديلها وإلغاء نشرها.
6. إضافة مشروع بصور متعددة والتحقق من ظهوره في الموقع.
7. إرسال طلب عرض سعر والتحقق من حفظه في قاعدة البيانات وظهوره في الإدارة.
8. رفع الملفات والتحقق من حدود النوع والحجم.
9. اختبار صلاحيات المستخدمين وحماية صفحات الإدارة.
10. اختبار الموقع بالعربية والإنجليزية.
11. اختبار التصميم على الجوال والكمبيوتر.
12. اختبار صفحات 404 وروابط الصفحات غير المنشورة.
13. اختبار الأداء وإمكانية الفهرسة.
14. التأكد من عدم وجود أزرار وهمية أو بيانات تجريبية ظاهرة.
15. التأكد من أن الموقع يعمل بعد النشر على النطاق الحقيقي.

عالج الأخطاء التي تظهر أثناء الاختبارات، ثم أعد الاختبارات المتأثرة.

## 9. المطلوب تسليمه

سلمني مشروعًا مكتملًا يشمل:
- الموقع متعدد الصفحات.
- لوحة تحكم المالك العاملة.
- قاعدة البيانات ومخططها.
- جميع الملفات اللازمة للتشغيل والنشر.
- ملف إعدادات البيئة النموذجي دون أسرار حقيقية.
- تعليمات تثبيت الاعتماديات وتشغيل المشروع وبنائه ونشره.
- توثيق إعداد قاعدة البيانات والتخزين والبريد الإلكتروني.
- بيانات اختبار منفصلة عن بيانات الإنتاج.
- قائمة بالميزات التي تم اختبارها بنجاح.
- توضيح أي خدمة خارجية تتطلب مني إنشاء حساب أو إدخال مفاتيح خاصة.

**شرط القبول النهائي:** يجب أن أستطيع تسجيل الدخول إلى لوحة التحكم، وتعديل بيانات الموقع وصوره وصفحاته وخدماته ومشاريعه، وإضافة محتوى جديد، واستقبال طلبات العملاء، ثم رؤية جميع التعديلات محفوظة بصورة دائمة على الموقع المنشور، دون الحاجة إلى تعديل الكود لكل تغيير.

ابدأ بتحليل المتطلبات وتصميم بنية المشروع وقاعدة البيانات وخريطة الصفحات، ثم نفذ المشروع على مراحل واضحة. لا تتوقف عند إنشاء التصميم أو الهيكل الأولي، بل أكمل التنفيذ والربط والاختبار والتوثيق حتى يصبح الموقع قابلًا للاستخدام الفعلي.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.