الهوية البصرية
أين يوجد اسم المتجر وشعاره وأيقوناته وألوانه وخطوطه في كل تطبيق، وما الذي تغيّره لتجعله يحمل هويتك.
لحزمة الحزمة الكاملة
أين توجد الهوية البصرية
تُضبط الهوية البصرية في الملفات، لا في لوحة الإدارة. لكل من المتجر ولوحة الإدارة نسخته الخاصة، لذا غيّر كل تطبيق تنشره.
| العنصر | المتجر (storefront/) | لوحة الإدارة (admin-dashboard/) |
|---|---|---|
| الاسم، والوصف، وبيانات التواصل، والروابط | src/config/brand.config.ts | src/config/brand.config.ts |
| الشعار | الاسم، مكتوبًا كنص بواسطة src/layouts/app/NavBar/components/Logo.tsx | public/assets/images/logo-for-lightmode.png وlogo-for-darkmode.png |
| أيقونة المتصفح (Favicon) وأيقونات التطبيق | src/app/ (favicon.ico وicon0.svg وicon1.png وapple-icon.png) وpublic/web-app-manifest-192x192.png و-512x512.png | الملفات نفسها في src/app/ وpublic/ الخاصين بها |
| الألوان | src/styles/theme-variables.css | src/styles/theme-variables.css |
| الخطوط | src/app/layout.tsx وsrc/styles/base.css | لا شيء مضبوط: خطوط النظام |
| النصوص | messages/<namespace>/<locale>.json | messages/ وتسميات الشريط الجانبي في navigationData.ts |
يُظهر yarn dev التغيير فورًا. أما بناء الإنتاج فيُضمِّن الهوية البصرية أثناء البناء، لذا شغّل yarn build مرة أخرى، أو docker compose up --build للحزمة الكاملة.
الاسم في المتجر
يأتي المتجر باسم STORE (وستور بالعربية). كل شيء موجود في BRAND_CONFIG، في storefront/src/config/brand.config.ts؛ لحقول النص قيمة en وقيمة ar.
| الحقل | أين يظهر |
|---|---|
storeName | الشعار: علامة نصية في الشريط العلوي والتذييل، وحقوق النشر في التذييل. |
name | تبويب المتصفح (Page | Name)، واسم الموقع في معاينة المشاركة، وتفاصيل الموقع التي تقرؤها محركات البحث. |
company | اسم المؤسسة الذي تقرؤه محركات البحث. |
meta.title, meta.description, meta.keywords, meta.author | عنوان الصفحة الرئيسية، والوصف والكلمات المفتاحية الافتراضية. |
meta.ogImage, meta.twitterImage | الصورة التي تظهر عند مشاركة صفحة، وهي مسار داخل public/. تأتي افتراضيًا بصورة الواجهة الرئيسية للصفحة الرئيسية. |
logo.icon | شعار المؤسسة الذي تقرؤه محركات البحث. |
theme.light, theme.dark | لون شريط أدوات المتصفح على الهواتف. |
manifest | اسم التطبيق المثبّت وألوانه وأيقوناته. |
contact.email, contact.phone, contact.address | عمود التواصل في التذييل وصفحة التواصل. تأتي بقيم مؤقتة: استبدلها. |
links.instagram, links.twitter, links.facebook, links.linkedin | أيقونات التواصل الاجتماعي في التذييل، كعناوين URL كاملة (يظهر twitter باسم X). كل حقل مملوء تظهر له أيقونة؛ والحقول الفارغة مخفية. تأتي فارغة، فلا يظهر صف التواصل الاجتماعي في المتجر الجديد. وتُدرج العناوين نفسها كحسابات المؤسسة لمحركات البحث. |
يأتي العنوان العام للموقع من NEXT_PUBLIC_SITE_URL، لا من هذا الملف. النصوص المرفقة تصف متجرًا للملابس الرجالية: الأوصاف في brand.config.ts، والصفحة الرئيسية في messages/home/، وعناوين الصفحات في messages/seo/ هي الأماكن التي تعيد فيها كتابتها.
الاسم في لوحة الإدارة
تأتي لوحة الإدارة باسم Aniq Dashboard. كل شيء موجود في BRAND_CONFIG، في admin-dashboard/src/config/brand.config.ts؛ لحقول النص قيمة en وقيمة ar.
| الحقل | أين يظهر |
|---|---|
name | عنوان تبويب المتصفح في كل صفحة، والاسم في الترويسة، واسم الموقع في معاينة المشاركة، والتذييل. |
company | سطر «بواسطة» في التذييل، والمؤسسة التي تقرؤها محركات البحث. |
version | التذييل. |
logo.alt | تسمية قارئ الشاشة لشعار صفحة تسجيل الدخول. |
logo.icon | شعار المؤسسة الذي تقرؤه محركات البحث. لا يُرسم على الشاشة. |
meta | العنوان والوصف والكلمات المفتاحية والمؤلف الافتراضية، والصورة التي تظهر عند مشاركة رابط لوحة الإدارة. |
domain.url | الأساس للروابط المطلقة في البيانات الوصفية. يأتي بالقيمة https://yourdomain.com: اضبطه على عنوان لوحة الإدارة نفسها. |
theme, manifest | لون شريط أدوات المتصفح، واسم التطبيق المثبّت وألوانه وأيقوناته. |
contact, links | البريد الإلكتروني والهاتف والحسابات الخاصة بالمؤسسة، لمحركات البحث فقط. |
تأتي لوحة الإدارة باسم Aniq Dashboard، مع أيقونة التطبيق (/web-app-manifest-512x512.png) كصورة للمشاركة. وجّه meta.ogImage وmeta.twitterImage إلى ملفك الخاص داخل public/؛ الصورة بمقاس 1200 في 630 تملأ بطاقات المعاينة الكبيرة على أفضل وجه.
الشعار والأيقونات
- شعار المتجر هو اسمه مكتوبًا كنص، من
storeName، في الشريط العلوي (src/layouts/app/NavBar/components/Logo.tsx) والتذييل (src/layouts/app/footer/components/FooterBrandIntro.tsx). لاستخدام صورة بدلًا منه، ضع صورتك فيLogo.tsx. ملفاlogo-for-lightmode.pngوlogo-for-darkmode.pngفي المتجر غير مستخدمين. - شعار لوحة الإدارة، في الترويسة وفي صفحة تسجيل الدخول، صورتان، واحدة لكل مظهر: استبدل
public/assets/images/logo-for-lightmode.pngوlogo-for-darkmode.pngمع الإبقاء على اسميهما. يشيرsrc/styles/theme-variables.cssإليهما عبر--logo-bg-image. - استبدل أيقونة المتصفح وأيقونات التطبيق في
src/app/وpublic/لكل تطبيق، مع الإبقاء على أسماء الملفات، حتى تواصل ملفات manifest والمتصفح العثور عليها.
الألوان والمظاهر
يعرّف كل تطبيق ألوانه كمتغيرات CSS في src/styles/theme-variables.css: مجموعة تحت :root للمظهر الفاتح، وأخرى تحت .dark للمظهر الداكن. اللون المميّز هو --primaryColor، وقيمته #ee8038 في التطبيقين.
| المتغير | ما يلوّنه |
|---|---|
--primaryColor, --primaryColorHover | الأزرار والروابط والعناصر المميَّزة |
--accent-text | النص الملوّن باللون المميّز على الأسطح الفاتحة (في المتجر فقط) |
--background | الصفحة |
--surface, --surface-hover | البطاقات واللوحات وحالة التمرير فوقها (يضيف المتجر --surface-elevated) |
--text, --text-muted | نص المحتوى والنص الثانوي |
--border | الفواصل وحدود حقول الإدخال |
- غيّر اللون في المجموعتين، حتى يبقى المظهران متناسقين.
- يتبع المظهر إعدادات نظام الزائر إلى أن يختار مظهرًا بزر التبديل، فيُحفظ اختياره في المتصفح.
- الحقل
themeفيbrand.config.tsهو لون شريط أدوات المتصفح فقط، لا لون الواجهة.
الخطوط
يحمّل المتجر ثلاثة خطوط من Google Fonts برابط واحد في src/app/layout.tsx: خط Plus Jakarta Sans لكل النصوص اللاتينية، ويُضبط على body في src/styles/base.css؛ وخط Zain للنص العربي، في الملف نفسه؛ وخط IBM Plex Sans Arabic للعناوين العربية، عبر الصنف .font-display-ar في src/styles/utilities.css.
لتغيير أحدها، استبدل عائلته في رابط Google Fonts داخل layout.tsx، ثم قيمة font-family المقابلة في ملفات CSS تلك. اختر خطًا عربيًا يتضمن الأوزان التي تستخدمها الصفحات.
لا تحمّل لوحة الإدارة أي خط ويب، وتستخدم خطوط النظام. أضف خطًا بالطريقة نفسها إن أردت.
ابحث عن كل ذكر للاسم
لا تكرر رسائل المتجر الاسم: حقوق النشر في التذييل تأخذه من storeName. أما اسم لوحة الإدارة فيظهر في نصوصها الخاصة. تحقق من التطبيقين:
storefrontgrep -rn "STORE\|ستور" src messagesadmin-dashboardgrep -rn "Aniq\|أنيق" src messagesواجهة API
لا تحمل واجهة API أي هوية خاصة بها ولا ترسل أي بريد إلكتروني. رسائل تسجيل الدخول والأخطاء فيها نص عادي في back-end/src/i18n/translations/<locale>/.