اجعله بعلامتك التجارية

شغّل الموقع بالأمر yarn dev أثناء التعديل: تُحدَّث الصفحة في كل مرة تحفظ فيها.

اسم الموقع

الاسم هو Publino كما يأتي القالب، وبوبلينو بالعربية. يظهر في عدة نصوص، كل منها في ملفي الرسائل:

• metadata.siteName وmetadata.title وmetadata.description في messages/common/<locale>.json: الاسم الذي تعرضه محركات البحث وبطاقات المشاركة، وعنوان الصفحة الرئيسية ووصفها.
• navigation.logo في الملفين نفسيهما: الاسم بجانب الشعار في الترويسة وفي الشريط الجانبي لنموذج لوحة التحكم.
• footer.copyright في الملفين نفسيهما: السطر الذي أسفل كل صفحة. يملأ الموقع {year}، فأبقه.
• whyChooseUs.title وfooter.description في messages/home/<locale>.json: جملتان في الصفحة الرئيسية.
• PricingPage.meta في messages/pricing/<locale>.json وContactPage.meta في messages/contact/<locale>.json: العنوانان Publino | Pricing وPublino | Contact us ووصفاهما.

موضعان آخران يحملانه كنص عادي: الكلمة الكبيرة في src/features/home/Footer/index.tsx، وname وshort_name في public/site.webmanifest، وهو الاسم الذي يعرضه الهاتف عند إضافة الموقع إلى شاشته الرئيسية.

الشعار

الشعار أيقونة صاروخ من Tabler Icons يتبعها اسم الموقع. ترسمه الترويسة في src/layouts/Navbar/index.tsx، ويكرر نموذج لوحة التحكم الأيقونة في src/features/home/DashboardMockup/components/Sidebar/components/BrandHeader.tsx.

استبدل الأيقونة بأيقونة أخرى من Tabler، أو بصورتك الخاصة، مثل ملف تضعه في public/:

import Image from "next/image";

const logo = {
  icon: <Image src="/your-logo.svg" alt="" width={20} height={20} priority />,
  text: t("logo"),
};

السمتان الفاتحة والداكنة

للموقع سمة فاتحة وسمة داكنة، ويفتح بالداكنة. زر الشمس والقمر في الترويسة يبدّل بينهما، ويتذكر المتصفح اختيار الزائر.

السمتان مجموعتا ألوان في src/styles/theme.css: الألوان الفاتحة تحت :root، والداكنة تحت [data-theme="dark"]. اللوحة أسود وأبيض ورمادي، مع الأزرق لونًا مميزًا لحلقات التركيز والاتجاهات الصاعدة ونقاط الخريطة. غيّر قيمة هناك فتتبعها كل الصفحات، مثل --interactive-primary للأزرار الرئيسية أو --background للصفحة.

[data-theme="dark"] {
    --background: #000000;
    --interactive-primary: #ffffff;
}

لتفتح الزيارة الأولى بالسمة الفاتحة، غيّر "dark" إلى "light" في src/providers/ThemeProvider.tsx وفي السكربت داخل src/app/[locale]/layout.tsx، في كل موضع تظهر فيه بالملفين.

• يبقى الموقع داكنًا

الخطوط

يستخدم الموقع خطوط نظام الزائر في اللغتين: --font-sans و--font-mono في src/styles/theme.css. لا شيء يُنزَّل، فيظهر النص فورًا.

لاستخدام خط من Google بدلًا منها، حمّله بـ next/font/google في src/app/[locale]/layout.tsx، وضع فئته على <html>، وضع اسم متغيره في CSS أولًا في --font-sans. للعربية، اختر خطًا يغطي الحروف العربية، مثل Noto Sans Arabic.

أيقونة الموقع وأيقونات التطبيق

كل صفحة تربط public/favicon.svg أيقونةً لها، وpublic/apple-touch-icon.png لأجهزة iPhone، وpublic/site.webmanifest الذي يذكر web-app-manifest-192x192.png وweb-app-manifest-512x512.png. استبدل كل ملف بملفك بالاسم نفسه. أما public/favicon.ico فهو البديل الذي تطلبه المتصفحات من تلقاء نفسها.

أيقونة 512 بكسل هي أيضًا الشعار الذي تراه محركات البحث لمؤسستك.

الصورة التي تظهر عند مشاركة صفحة

تعرض الشبكات الاجتماعية وتطبيقات المحادثة الملف public/image.png بحجم 1200 في 630 بكسل عند مشاركة صفحة. استبدله بصورتك بالحجم نفسه. وإذا غيّرت الحجم، فغيّر width وheight في ogImage داخل src/config/site.config.ts أيضًا.

وصفها لقارئات الشاشة هو metadata.imageAlt في messages/common/<locale>.json. وتعرض بطاقة ميزة مقاييس الأداء في الصفحة الرئيسية الصورة نفسها كأنها الموقع الذي تحلله، فتظهر صورتك هناك أيضًا.

كيف تعمل السمات