# Raya Home · الديزاين الجديد (Lumen v1.0)

حزمة تصميم كاملة لـ **Raya Home Design** (تشطيب + تصميم داخلي + أبواب WPC): الموقع العام، تطبيق العميل، لوحة التحكم الداخلية، الديزاين سيستم، ودليل الهوية. **كلها HTML / CSS / JavaScript خام**: من غير Node ولا مكتبات ولا build ولا سيرفر.

> **الحالة:** تصميم للمراجعة مع العميل. مش منشور على أي استضافة. الصور توضيحية، والبيانات تجريبية، واللوجو مقترح مؤقت.

## كيف تفتحه
1. افتح **`index.html`** في Chrome. ده العرض اللي فيه كل التصاميم، ومنه تنتقل لأي حاجة.
2. كل الروابط نسبية، والخطوط والأيقونات محفوظة جوه الفولدر، فبيشتغل **من غير نت** ومن الجهاز مباشرة.
3. للنشر وإرسال لينك للعميل: [`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md).
4. جرّب `⌘K` / `Ctrl+K` في أي صفحة: بحث سريع في كل حاجة.

## المحتويات
| المسار | المحتوى |
|---|---|
| `index.html` | العرض (hub): الفكرة، كل الأسطح، معرض الصفحات والشاشات، «جرّب»، القرارات |
| `website/` | **20 صفحة** موقع متجاوبة: الرئيسية، الخدمات، المشاريع + تفاصيل، أبواب WPC + configurator، الخامات، معمل الإضاءة، كيف نشتغل، ابني طلبك، بوابة العميل، جواز الشقة، المدونة + مقال، عن الاستوديو، تواصل، احجز معاينة، أسئلة، الشروط، 404 |
| `app/` | **37 شاشة** موبايل 390×844 + `app/index.html` (معرض تفاعلي): تسجيل الدخول، الحيطة، الموافقات، المقايسة، الدفعات، الصور، جواز الشقة، المحادثة، حكاية الأسبوع، ملاحظات التسليم، تطبيق مهندس الموقع |
| `dashboard/` | **18 شاشة** داشبورد + `dashboard/index.html` (معرض): العملاء (كانبان)، BOQ، عروض الأسعار، المشاريع، الجدول، المالية، الفريق والصلاحيات، الإعدادات |
| `design-system.html` | **الديزاين سيستم الحي**: 23 قسم: الألوان بمعانيها، الخطوط، الموتيف، أسلوب الكتابة والتعامل، 70+ مكوّن بحالاته وكوده، الوصول، RTL/LTR، مرجع الـ tokens |
| `brand/brand.html` | دليل الهوية: الفكرة (8 أسئلة)، الاسم، الشعار ونسخه، الألوان، الموتيف، الصور، الأسلوب، تطبيقات حقيقية |
| `audit.html` | تغطية البريف: كل متطلب وفين اتغطّى |
| `assets/css/` | `tokens.css` (كل القيم) · `base` · `components` · `patterns` · `web` · `app` · `dash` · `showcase/brand/hub` |
| `assets/js/` | `icons.js` (385 أيقونة) · `data.js` · `shell.js` · `raya.js` · `web*.js` · `app.js` · `dash*.js` |
| `assets/logo/` | الشعار بنسخه (SVG) |
| `assets/img/` | الصور التوضيحية + `CREDITS.md` |
| `previews/` | صور PNG/JPG لكل شاشة (للإرسال السريع) |
| `docs/` | `DESIGN_SYSTEM.md` · `DESIGN_SYSTEM_RULES.md` · `BRAND_DIRECTION.md` · `CONTENT_GUIDE.md` · `USER_FLOWS.md` · `SCREEN_INVENTORY.md` · `OPEN_QUESTIONS.md` · `QA_CHECKLIST.md` · `IMAGE-PROMPTS.md` · `DEPLOYMENT.md` |

## الفكرة في كام سطر
- **الضوء الدافي على خامة حقيقية.** من صور العميل: خشب مضلّع، رخام، إضاءة مخفية.
- **الشريحة (موتيف شايل داتا):** كل شقة 8 بنود شغل، وكل بند شريحة ضوءها حالته. أمبر = شغّالة، ساج = خلصت، دَسك = مستنية قرارك، رست = متأخرة.
- **السؤال اللي بيبيع:** «قرّبنا؟ قرّبنا قد إيه… بجد؟» وأول حاجة في التطبيق رقم ضخم بيجاوبه (68%).
- **جواز الشقة:** ورقة التسليم اللي بتتشارك، وعليها «اتعمل بواسطة Raya Home».
- **عامية مصرية، جمل بنقطة، `.mark` واحد، أرقام 0–9، وصراحة.**
- **هادي في الأساس، صاخب في لحظات:** الحد الأسود والظل الصلب على 1–3 عناصر بس.

## افتراضات استخدمناها (قابلة للتعديل)
- الألوان مقدّرة من صور فيسبوك. اللوجو مقترح بديل لحد ما توصل الملفات الأصلية.
- لا يوجد أي سعر أو عدد مشاريع أو سنين خبرة أو آراء عملاء أو شهادات. العرض المقترح: معاينة + مقايسة مكتوبة (ما اتأكدش).
- بيانات التواصل (010 95848075 · mohmednasef1982@gmail.com · العنوان) من الصفحة العامة وهتتأكد قبل الإطلاق.
- العميل التجريبي: سلمى عبد الله · شقة التجمع الخامس · RH-2026-014 · 165 م² · 68% · الأسبوع 9 من 14. أرقام النظام الداخلي تجميعها متسق ومعلّم «تجريبي».
- التاريخ داخل الشاشات: 22 أكتوبر 2026.

## قرارات محتاجة تأكيد العميل (الأهم)
1. ملف الشعار الأصلي ومعايرة الألوان منه.
2. اللغة: عربي فقط ولا ثنائي؟ (السيستم جاهز لـ LTR.)
3. موقع واحد ولا موقعين (تشطيب / WPC)؟
4. سياسة التسعير والمعاينة (بفلوس ولا لأ).
5. الخدمات الفعلية، وبوابة العميل/التطبيق في المرحلة الأولى؟
6. الضمان والصيانة وبنود جواز الشقة.
7. صور مشاريع حقيقية وإذن النشر.
الكل (20 قرار): [`docs/OPEN_QUESTIONS.md`](docs/OPEN_QUESTIONS.md).

## ملاحظات للمطوّرين
- كل صفحة بتربط `raya.css` + ملف سطح واحد (`web` / `app` / `dash`)، وبتشغّل `icons.js → data.js → shell.js → raya.js` بالترتيب.
- القوائم المشتركة (nav، الفوتر، tab bar، sidebar) بتتبني من `shell.js`: تعديل واحد يظهر في كل الصفحات.
- الأيقونات: `<i data-i="hammer"></i>` (Lucide ISC inline).
- أي صورة تتبدّل بوضع ملف بنفس الاسم في `assets/img/` (WebP).
- التفاعلات كلها بـ data-attributes (راجع `docs/DESIGN_SYSTEM.md` §4).
- الصلاحيات في الداشبورد **واجهة بس**. الأمان الحقيقي بيتعمل على السيرفر في مرحلة الهندسة.
- قبل أي تعديل: [`docs/DESIGN_SYSTEM_RULES.md`](docs/DESIGN_SYSTEM_RULES.md).

## التراخيص
الخطوط: SIL OFL (Alexandria · IBM Plex Sans Arabic · Reem Kufi). الأيقونات: Lucide (ISC). الصور: Unsplash License + صور مرجعية مرفقة (راجع `assets/img/CREDITS.md`).