# خطة FirstPay Egypt

## التنفيذ
- React/Vite/Tailwind على قالب web-db-user مع Server + MySQL مُدار.
- واجهة عامة ثنائية اللغة داخل SPA: الرئيسية، الشركة، الخدمات، الأخبار، الوظائف، الأسئلة الشائعة، والتواصل.
- لوحة تحكم أولية على `/admin` بتصميم تشغيلي لإدارة المحتوى والإحصاءات والطلبات، مع تجهيز ربطها بالـ CRUD وقاعدة البيانات.
- AI Chat عبر endpoint tRPC يستخدم خدمة Manus LLM من الخادم مع سياق FirstPay ثابت قابل للتوسعة من إعدادات الإدارة.
- الشعار المرفق محفوظ في `/manus-storage/...` ويستخدم كأصل الهوية، مع لون رئيسي كحلي عميق ولمسات سماوي كهربائي.
- ملف `public/manus-routes.json` يعلن كل المسارات الحالية.

## التصميم
- **الاختيارات:** Neo-fintech editorial (0.06)، Midnight enterprise (0.04)، Warm civic tech (0.08). تم اختيار Neo-fintech editorial.
- **الحركة التصميمية:** واجهات شركات التقنية المالية الحديثة مع مساحات تحريرية كبيرة، بطاقات خدمات مائلة بصريًا، وخطوط اتجاهية مستوحاة من رمز البرق.
- **المبادئ:** وضوح قبل الزخرفة؛ ثقة مؤسسية؛ حركة خفيفة ذات معنى؛ وصول سريع للخدمة أو المعلومة.
- **فلسفة الألوان:** الكحلي يرسخ الأمان والاعتمادية، السماوي يضيف الطاقة والسرعة، والأبيض يترك مساحة للتنفس. اللون المميز: `#22263f`.
- **التخطيط:** شريط تنقل ثابت، hero غير متماثل مع لوحة أرقام على الجانب، ثم أقسام متدرجة بصريًا بدل شبكة بطاقات مكررة.
- **العناصر المميزة:** شرائط مائلة، توهج سماوي حول نقاط التحويل، وحدود دقيقة مستوحاة من دوائر الدفع.
- **التفاعل والحركة:** hover يرفع البطاقات 4px؛ أزرار CTA تظهر سهمًا متحركًا؛ chat يفتح من أسفل اليمين؛ احترام `prefers-reduced-motion`.
- **الخطوط:** Cairo للعربية والعناوين، Inter للنصوص اللاتينية؛ تدرج واضح من 14px للنص إلى 64px للعنوان الرئيسي.
- **جوهر العلامة:** بنية دفع مصرية تجعل الحركة المالية أبسط وأقرب. الصفات: موثوقة، سريعة، إنسانية.
- **الصوت:** مباشر وواثق ومطمئن. أمثلة: «خلّي كل دفعة تمشي صح.» و«حلول دفع مصممة لحركة أعمالك.»
- **الشعار:** استخدام العلامة الأصلية داخل حاوية بيضاء نظيفة، مع امتداد البرق كعنصر زخرفي في الخلفيات لا كبديل عن العلامة.

## هيكل المشروع
- `client/src/pages/Home.tsx`: الموقع العام والدردشة ولوحة التحكم.
- `client/src/App.tsx`: المسارات العامة والإدارية.
- `client/src/index.css`: الهوية البصرية والاستجابة.
- `server/routers.ts`: endpoint محادثة AI.
- `drizzle/schema.ts`: نقطة توسيع جداول CMS لاحقًا.
- `public/manus-routes.json`: manifest للمسارات.