الهوية البصرية

أين توجد الهوية البصرية

كل لون هو متغير (token) معرَّف مرة للمظهر الفاتح ومرة للمظهر الداكن. لا يحمل أي عنصر في الصفحات لونًا خاصًا به، لذلك يصل المتغير المعدَّل إلى كل الصفحات.

اسم الموقع

في storefront/src/config/brand.config.ts، لكل اسم قيمة بالإنجليزية وأخرى بالعربية:

name:      { en: "Food Studio", ar: "فود ستوديو" },   // the restaurant
company:   { en: "Food Studio", ar: "فود ستوديو" },   // legal or trading name
shortName: { en: "Food Studio", ar: "فود ستوديو" },   // tab titles and the app icon label
storeName: "Food Studio",                    // the logo link's accessible name

يصل الاسم إلى عناوين الصفحات، وحقوق النشر في التذييل، وملف تعريف التطبيق القابل للتثبيت، والبيانات المنظَّمة التي تقرؤها محركات البحث.

شعار الموقع وأيقوناته

يعرض الشريط العلوي ملف شعار واحدًا لكل لغة ومظهر، في storefront/public/brand/. كل ملف هو الشعار الكامل، الرمز والكتابة في صورة واحدة.

• استبدلها بملفاتك واضبط عرض كل ملف، على ارتفاع 176، في LOCKUPS داخل src/layouts/app/NavBar/components/Logo.tsx.
• أيقونات الشاشة الرئيسية هي public/web-app-manifest-192x192.png وpublic/web-app-manifest-512x512.png؛ وأيقونات المتصفح هي favicon.ico وicon0.svg وicon1.png وapple-icon.png في src/app/.
• النجمة في قسم المكافآت هي public/brand/rewards-star.svg.

ألوان الموقع وخطوطه

كلاهما في storefront/src/styles/theme-variables.css، مرة لكل مظهر. تحقق من أن النص على لون هويتك الجديد ما زال مقروءًا بنسبة 4.5 إلى 1 في المظهرين. الخطوط هي Montserrat للعناوين الكبيرة، و Inter للنص اللاتيني، و IBM Plex Sans Arabic للعربية، وتُحمَّل في src/app/layout.tsx. ألوان شريط المتصفح وشاشة البداية هي theme وmanifest في إعدادات الهوية.

نتائج البحث، والمشاركة، والنطاق

• يحتوي meta في إعدادات الهوية على عنوان الصفحة الرئيسية ووصفها وكلماتها المفتاحية باللغتين، وصورة المشاركة، public/og-image.jpg بمقاس 1200 في 630. استبدل هذه الصورة بصورتك.
• تأخذ كل صفحة أخرى عنوانها ووصفها من messages/seo/en.json وmessages/seo/ar.json. وتستخدم صفحة الطبق اسم الطبق نفسه ووصفه وأول صورة له.
• domain.url هو أساس كل عنوان أساسي (canonical)، وخريطة الموقع، وملف robots. اضبطه على عنوانك الحقيقي قبل النشر.

بيانات التواصل والروابط

يحتوي contact في إعدادات الهوية على البريد الإلكتروني والهاتف والعنوان العامة للمطعم، ويحتوي links على روابط الموقع ووسائل التواصل الاجتماعي. لا يظهر العنوان إلا عندما لا يكون لدى واجهة API أي مطبخ لعرضه: عناوين المطابخ وأرقام هواتفها وساعات عملها في صفحتَي التواصل والفروع تأتي من المطابخ التي تعدّلها في لوحة التحكم.

اسم لوحة التحكم وشعارها وألوانها

• الاسم: يحتوي messages/layouts/en.json وar.json، تحت brand وnavbar، على الاسم وعنوان الصفحة والوصف وسطر التذييل. وname وcompany في src/config/brand.config.ts هما الاسمان نفسهما حيث يلزم النص خارج الترجمة. ابحث في messages/ عن "Food Studio" لتجد الباقي.
• الشعار: استبدل mark.svg وwordmark-white.webp وwordmark-master.webp وwordmark-ar-white.webp وwordmark-ar-master.webp في public/brand/ مع الإبقاء على الأسماء، أو وجّه logo في إعدادات الهوية إلى ملفات جديدة مع عرضها على ارتفاع 176. أيقونات التطبيق القابل للتثبيت هي ملفا web-app-manifest في public/، وأيقونة المتصفح هي src/app/icon.svg.
• الألوان: --primaryColor و--on-primary (لون الهوية والنص فوقه)، و--brand-highlight و--brand-text (لون الهوية كنص أو كإطار)، و--background و--surface و--border، و--text و--text-muted، و--errorColor و--success و--warning، في src/styles/theme-variables.css، مرة لكل مظهر.
• الخط: المتغير --font-sans في src/styles/base.css، وهو Inter Variable افتراضيًا.
• العنوان: NEXT_PUBLIC_DASHBOARD_URL في ملف .env الخاص بلوحة التحكم.

بيانات المطعم نفسه

تحفظ تعبئة البيانات اسم المطعم وشعاره النصي وبريد الدعم وهاتفه كإعدادات: site_name وsite_tagline وsupport_email وsupport_phone. يغيّرها الفريق في لوحة التحكم من «الإعدادات»، ثم «المطعم»، ثم «كل الإعدادات بمفاتيحها». وتُعدَّل هناك أيضًا أسماء المطابخ وعناوينها وبيانات التواصل الخاصة بها.

الصياغة والنصوص القانونية

كل جملة ظاهرة موجودة في messages/، بمجلد لكل قسم فيه en.json وar.json. أعد كتابة النصوص في الملفين. سياسة الخصوصية وشروط الخدمة في messages/legal مكتوبة لمطعم خيالي: استبدلها بنصوص تناسب نشاطك وبلدك قبل الإطلاق.

• اللغات