الهوية البصرية
اجعل الموقع واللوحة لك: الاسم وصيغ الشعار والأيقونات والألوان والخطوط وبيانات المنظّم ونصوص محركات البحث.
لحزمة الحزمة الكاملة
أين توجد الهوية البصرية
| العنصر | الموقع (storefront/) | لوحة التحكم (admin-dashboard/) |
|---|---|---|
| الاسم، صيغ الشعار، بريد التواصل، السوق | src/config/brand.config.ts | src/config/brand.config.ts |
| الألوان والخطوط والظلال | src/styles/theme-variables.css | src/styles/theme-variables.css |
| صيغ الشعار والعلامة والأيقونات | public/brand/, public/, src/app/ | public/brand/, public/, src/app/ |
| الزخارف | public/decor/ | public/decor/ |
| الخطوط | src/fonts/، تُحمَّل في src/app/[locale]/layout.tsx | src/fonts/، تُحمَّل في src/app/layout.tsx |
| النصوص | messages/ | messages/ |
كل لون رمز (token) يُعرَّف مرة للمظهر الفاتح (:root) ومرة للمظهر الداكن (:root[data-theme="dark"]). تقرأ المكونات الرموز فقط، لذلك يصل تغيير الرمز إلى كل صفحة. غيّر لون العلامة في الكتلتين، وإلا احتفظ مظهر واحد باللون القديم.
اسم الموقع وبريد التواصل والسوق
في storefront/src/config/brand.config.ts:
name: "Ticketory", // the manifest and search engines' structured data
description: "...", // the installable app's description
mark: "/brand/mark.svg", // structured data for search engines
lockups: { en: {...}, ar: {...} }, // the header and footer logo, with each file's size
themeColor: { light: "#FFFBF0", dark: "#111111" }, // the browser bar
contactEmail: "support@example.test", // until the API's settings answer
market: {
currency: "USD", // money with no currency of its own
timeZone: "Europe/London", // dates with no time zone of their own
},
keywords: ["events", "tickets", ...],الاسم كما تكتبه كل لغة، ويُستخدم في عناوين التبويبات وبطاقات المشاركة، هو meta.siteName في messages/layouts/en.json وar.json. ويظهر اسم المنتج أيضًا داخل الجمل، باللغتين: ابحث في messages/ عن Ticketory وعن كتابته العربية تيكيتوري، وأعد كتابة تلك الأسطر.
صيغ الشعار والأيقونات والزخارف في الموقع
| الملف | الاستخدام |
|---|---|
public/brand/lockup-en-light.webp, lockup-en-dark.webp | الصيغة الإنجليزية للشعار (العلامة والاسم مرسومان معًا) على الصفحات الفاتحة والداكنة |
public/brand/lockup-ar-light.webp, lockup-ar-dark.webp | الصيغة العربية للشعار: الاسم بالخط العربي والعلامة على اليمين |
public/brand/mark.svg | العلامة وحدها |
public/brand/og-card.png | بطاقة المشاركة بقياس 1200 في 630 |
src/app/icon.svg, src/app/apple-icon.png | أيقونتا تبويب المتصفح والشاشة الرئيسية |
public/web-app-manifest-192x192.png, public/web-app-manifest-512x512.png | أيقونات التطبيق القابل للتثبيت |
كل صيغة شعار صورة جاهزة واحدة بخلفية شفافة مقصوصة على محتواها. استبدلها بصورك أيًّا كان قياسها، واكتب عرض كل ملف وارتفاعه في lockups داخل إعدادات العلامة، حتى يحافظ الترويس على تناسبه.
النجوم والموجات والمثلثات والدوائر والنقاط والخطوط المتعرجة حول الأقسام هي ملفات SVG في public/decor/. يسرد كل قسم أماكن أشكاله في مجلد constants/ الخاص بميزته (وللتذييل في src/layouts/app/SiteFooter/constants/): احذف صفًّا لإسقاط شكل، أو ضع ملف SVG خاصًّا بك في public/decor/ وأضف اسم ملفه إلى DecorAsset في src/components/Decorations/types.ts.
ألوان الموقع وخطوطه
| المتغير | فاتح | داكن | الدور |
|---|---|---|---|
--background | #FFFBF0 | #111111 | الصفحة |
--surface | #FFFEF7 | #1B1B1B | اللوحات والبطاقات والحقول |
--text | #080808 | #FFFBF0 | النص |
--border | #111111 | #777777 | الخط الحبري بسمك 3 بكسل على اللوحات وعناصر التحكم |
--primaryColor | #FF3289 | #FF3289 | الأزرار الأساسية والصفحة الحالية ونقطة العنوان |
--accent-yellow, --accent-teal, --accent-blue | #FFDC32, #00C7B8, #244BFF | الشيء نفسه | ألوان التذاكر |
--errorColor | #A51D4F | #FF6B9E | الأخطاء وعلامات الحقول المطلوبة |
النص على التعبئات الوردية والصفراء والفيروزية أسود (--on-accent)، وعلى الأزرق والحبري كريمي. تحقق من أن النص على ألوانك ما زال مقروءًا بنسبة 4.5 إلى 1 في المظهرين. ولكل فعالية أيضًا لون تذكرتها الخاص، يُختار في محرر الفعاليات.
تأتي ملفات الخطوط في src/fonts/ داخل كل تطبيق، فلا ينزّلها البناء أبدًا: Archivo Black للعناوين (Lalezar بالعربية) وDM Sans للنص (Noto Sans Arabic)، وكلها بترخيص SIL Open Font في src/fonts/OFL.txt. لتغيير أحدها ضع ملف .woff2 في src/fonts/، ووجّه استدعاء localFont إليه، وأضف ترخيصه إلى OFL.txt.
نتائج البحث، والمشاركة، والنطاق
NEXT_PUBLIC_SITE_URLهو أساس كل عنوان أساسي، وبدائل اللغات، وبطاقات المشاركة، وrobots.txt، وخريطة الموقع. اضبطه على عنوانك الحقيقي قبل أن تبني.- العنوان والوصف ونص المشاركة الافتراضية تحت
metaفيmessages/layouts؛ وما يخص كل صفحة تحتmetaفي مساحة اسمها داخلmessages/. وتستخدم صفحة الفعالية عنوان الفعالية وملخصها. - تسرد خريطة الموقع الصفحة الرئيسية والفعاليات والأماكن والمنظّمين والأسعار والأسئلة الشائعة والتواصل والصفحات القانونية، وكل فعالية ومكان ومنظّم عام، كلًّا باللغتين مع بديلها. ويُبعد robots.txt صفحات الحساب والدفع والطلبات وتسجيل الدخول.
- تُكتب الأموال بالطريقة نفسها في اللغتين، الرمز أولًا بأرقام لاتينية (
$41.20)، عبرsrc/lib/format/formatMoney.ts.
فاتح وداكن ونظام
يقدّم التطبيقان النظام والفاتح والداكن. يتبع النظام نظام التشغيل ويتغير معه. يُحفظ الاختيار في localStorage بالمتصفح (ticketory-theme في الموقع وticketory-admin-theme في اللوحة)، ولا يُرسل شيء إلى واجهة API، ويطبّقه سكربت قصير في رأس الصفحة قبل أول رسم، فلا يومض المظهر الآخر عند إعادة التحميل. وألوان شريط المتصفح هي themeColor في الموقع وtheme في إعدادات علامة اللوحة.
اسم اللوحة وصيغ شعارها وألوانها
- الاسم:
nameفيsrc/config/brand.config.ts، بالإنجليزية والعربية (Ticketoryوتيكيتوري، وفيcompanyوshortNameوالنص البديل للشعار وmanifestأيضًا)، هو نصف العلامة في عنوان كل صفحة (Events | Ticketory) والنص البديل لصيغة الشعار؛ ويحملmetaالعنوان والوصف والكلمات المفتاحية الافتراضية وصورة المشاركة (public/og-image.jpgبقياس 1200 في 630)، ويحملdomain.urlأساس عناوين البيانات الوصفية المطلقة (يتقدم عليهNEXT_PUBLIC_DASHBOARD_URL)، ويحملmanifestالتطبيق القابل للتثبيت. وعنوان كل صفحة نفسها تحتmeta.titlesفي مساحتي الاسمdashboardوauthداخلmessages/. - صيغ الشعار والأيقونات: استبدل ملفات
lockup-*.webpالأربعة وmark.svgفيpublic/brand/مع إبقاء الأسماء، أو غيّر المسارات والأحجام فيBRAND_LOCKUPS. أيقونة تبويب المتصفح هيsrc/app/icon0.svg، وأيقونة iPhone هيsrc/app/apple-icon.png، وأيقونات التطبيق القابل للتثبيت هي ملفاweb-app-manifestفيpublic/. - الألوان:
--backgroundو--surfaceو--surface-elevatedو--surface-hoverو--surface-sunkenو--textو--text-mutedو--borderو--primaryColorوالألوان المميِّزة و--ink-buttonو--on-inkو--errorColorو--shadow-inkوأزواج--tone-*لشارات الحالة، فيsrc/styles/theme-variables.css، مرة لكل مظهر. وأي حالة تأخذ أي درجة موجود فيsrc/config/statusTones.ts. - الخطوط: DM Sans وNoto Sans Arabic وArchivo Black وLalezar، تُحمَّل من
src/fonts/فيsrc/app/layout.tsxوتُسند فيsrc/styles/base.css.
بيانات المنظّم نفسه
اسم كل مساحة عمل وبريد الدعم والعملة (USD أو EUR أو GBP أو SAR أو AED) والمنطقة الزمنية ورسوم الحجز، التي يدفعها الحاضر دائمًا عند الدفع، كلها إعدادات تُعدَّل في اللوحة من الإعدادات ثم عام. يقرؤها الموقع من GET /api/public/settings، مع مدة حجز المقاعد (عشر دقائق في البيانات التجريبية) وطرق الدفع المعروضة. ولكل فعالية أيضًا منطقتها الزمنية الخاصة.
لا تُرفع صيغ الشعار في اللوحة: فهي تأتي من الملفات أعلاه.
الصياغة والصفحات القانونية
كل جملة مرئية موجودة في messages/، مجلد لكل قسم فيه en.json وar.json. أعد كتابة النصوص في الملفين. سياسة الخصوصية والشروط وسياسة الإلغاء في messages/legal نصوص تجريبية: أعد كتابتها لعملك ولبلدك قبل أن تبيع تذاكر حقيقية.