اجعله خاصًا بك

أين تغيّر النصوص، والمشاريع، والأسعار، والصور، والألوان، والخطوط، والأقسام، والروابط، ونموذج التواصل، وتفاصيل محركات البحث.

النصوص

كل كلمة ظاهرة، وكل تسمية زر ونص بديل، وعنوان الصفحة ووصفها موجودة في messages/en.json وmessages/ar.json. غيّر القيمة، واحتفظ بالمفتاح، وغيّر الملفين معًا.

جزء الصفحة	المفتاح في ملفات الرسائل
عنوان الصفحة، والوصف، واسم الموقع	`metadata`
اسم العلامة في الشعار	`common.brand`
شريط التنقل وقائمة الجوال	`navigation`
القسم الافتتاحي	`hero`
المميزات	`features`
الأعمال	`work`
المنهجية	`process`
آراء العملاء	`testimonials`
الأسعار	`pricing`
التواصل، والنموذج، والعنوان	`contact`
التذييل	`footer`

الكلمات بين الأقواس المعقوصة، مثل {year} في footer.copyright، تملؤها الصفحة. أبقِها كما هي في اللغتين.
مزايا كل خطة قائمة: أضف أسطرًا أو احذفها في pricing.plans.basic.features (وstandard وpremium) في الملفين.

المشاريع والمميزات والخطوات وآراء العملاء والخطط

كل منها قائمة في المجلد constants/ الخاص بقسمه. يسمّي key في كل عنصر نصّه في ملفات الرسائل.

القائمة	الملف	إضافةً إلى المفتاح
المشاريع	`src/features/home/Work/constants/projectItems.ts`	`image`, `year`
المميزات	`src/features/home/Features/constants/featureItems.ts`	`icon`، أيقونة من Lucide
خطوات المنهجية	`src/features/home/Process/constants/processSteps.ts`	`number`
آراء العملاء	`src/features/home/Testimonials/constants/testimonialItems.ts`	لا شيء
الخطط	`src/features/home/Pricing/constants/pricingPlans.ts`	`monthlyPrice`, `annualPrice`, `popular`

لإضافة عنصر، أضف مدخلًا بمفتاح key جديد، ثم أضف نص ذلك المفتاح في ملفي الرسائل. يحتاج مشروع جديد بالمفتاح atlas إلى work.projects.atlas.title وwork.projects.atlas.subtitle.

الأسعار والعملة

المبالغ أرقام عادية، monthlyPrice وannualPrice، في pricingPlans.ts. وتُضبط العملة مرة واحدة، currency: "USD"، في src/features/home/Pricing/components/PricingCard.tsx: غيّرها إلى رمز عملة آخر مثل EUR. وتُنسَّق الأسعار حسب لغة الصفحة.

تسمية "وفّر 20%" نص، وهي pricing.save. حدّثها عندما يتغير خصمك السنوي.

الصور

الصورة	الملف
المشاريع، وتُعرض في إطارات 4:3	من `public/works/1.webp` إلى `4.webp`، ومدرجة في `projectItems.ts`
بطاقة المعاينة على الشبكات الاجتماعية، 1200 في 630	`public/image.png`
أيقونات المتصفح والشاشة الرئيسية	`public/favicon.ico`, `favicon.svg`, `favicon-96x96.png`, `apple-touch-icon.png`, `web-app-manifest-192x192.png`, `web-app-manifest-512x512.png`

احتفظ باسم الملف لتستبدله دون لمس الشيفرة، أو غيّر مساره في projectItems.ts. تظهر صور المشاريع بالتدرج الرمادي حتى يمر المؤشر فوقها.

الألوان

لوحة الألوان هي قائمة متغيرات CSS في أعلى src/styles/globals.css، مثل --background و--foreground و--primary و--border، مكتوبة كأرقام HSL ويستخدمها tailwind.config.ts. قيمة --radius هي 0rem، ما يُبقي كل الزوايا قائمة.

تستخدم أقسام كثيرة أيضًا فئات Tailwind للأسود والأبيض والرمادي المحايد مباشرة، مثل bg-black وtext-white/70. لذلك يعني نظام ألوان جديد تغيير هذه الفئات في ملفات الأقسام أيضًا.

الموقع داكن فقط: يضبط التخطيط الفئة dark، ولا يتبع المظهر إعدادات نظام الزائر.

الخطوط

يحمّل src/app/[locale]/layout.tsx الخط Inter للإنجليزية وNoto Sans Arabic للعربية باستخدام next/font/google، ويستخدم نص الصفحة الخط الخاص بلغتها.

يُتاح Inter أيضًا كمتغير CSS باسم --font-inter، وتستخدمه العناوين (h1 إلى h6) في src/styles/globals.css في كل اللغات عدا العربية. لتغيير الخط الإنجليزي، استورد عائلة أخرى من next/font/google في التخطيط واحتفظ عليها بـ variable: "--font-inter"، لتتبعها العناوين.

الأقسام

يسرد src/app/[locale]/page.tsx الأقسام بالترتيب. انقل سطرًا لإعادة ترتيبها، أو احذف سطرًا لإزالة قسمه. يوجد كل قسم في src/features/home/، في مجلد خاص به.

عندما تزيل قسمًا، احذف رابطه أيضًا من src/layouts/constants/sectionLinks.ts، كي لا يشير إليه شريط التنقل والتذييل.

الروابط والأزرار

الروابط	الملف
روابط الأقسام في شريط التنقل والتذييل (`#features` و`#work` و`#process` و`#pricing`)	`src/layouts/constants/sectionLinks.ts`
أيقونات التواصل الاجتماعي في التذييل	`src/layouts/Footer/constants/socialLinks.ts`
روابط الخصوصية والشروط	`src/layouts/Footer/constants/legalLinks.ts`
روابط التواصل الاجتماعي في قسم التواصل	`src/features/home/Contact/constants/contactSocials.ts`
البريد الإلكتروني والهاتف في قسم التواصل	`src/features/home/Contact/constants/contactDetails.ts`

تأتي روابط التواصل الاجتماعي والروابط القانونية بالقيمة #: ضع عنوانك في كل href. لا يتضمن القالب صفحة خصوصية أو شروط خاصة به.

أزرار بلا وجهة

زر تواصل معنا في شريط التنقل وقائمة الجوال، وزرّا القسم الافتتاحي، وعرض جميع الأعمال، وأزرار الأسعار، وبطاقات المشاريع لا تؤدي إلى أي مكان بعد. اجعل كلًا منها رابطًا إلى حيث تريد، مثل #contact، في src/layouts/Navbar/components/DesktopNav.tsx وMobileMenu.tsx، وsrc/features/home/Hero/components/HeroButtons.tsx، وsrc/features/home/Work/index.tsx وcomponents/ProjectCard.tsx، وsrc/features/home/Pricing/components/PricingCard.tsx.

نموذج التواصل

يتحقق النموذج من الاسم والبريد الإلكتروني والرسالة في المتصفح قبل الإرسال، ونصوص الأخطاء موجودة ضمن contact.form.validation. وتعتمد وجهة الإرسال على NEXT_PUBLIC_API_BASE_URL:

فارغ، وهو الافتراضي: لا يُرسل شيء. بعد توقف قصير يعرض النموذج رسالة النجاح، لتتمكن من تجربته.
مضبوط: يرسل النموذج طلب POST إلى المسار /contact في واجهة API الخاصة بك مع جسم JSON هو { name, email, message }. تعرض الإجابة 2xx رسالة النجاح، ما لم يقل JSON فيها "success": false؛ وأي إجابة أخرى تعرض رسالة الخطأ.

متصفح الزائر هو من يرسل الطلب، لذا يجب أن تقبل واجهة API الخاصة بك الطلبات من عنوان موقعك (CORS). الاستدعاء موجود في src/lib/api/contact.ts. وتُكتب القيمة وقت البناء: أعد البناء بعد ضبطها.

محركات البحث وبطاقات الشبكات الاجتماعية

عنوان الصفحة، والوصف، واسم الموقع، والنص البديل لصورة المعاينة موجودة ضمن metadata في كل ملف رسائل. يحدد NEXT_PUBLIC_SITE_URL الرابط الأساسي، وروابط اللغتين en وar، والعنوان في بطاقات المعاينة على الشبكات الاجتماعية، التي تعرض public/image.png.

يذكر generator في src/app/[locale]/layout.tsx اسم مؤلف القالب في رأس الصفحة. ضع اسمك هناك، أو احذف السطر.
يسمّي public/site.webmanifest الموقع Mono للهواتف التي تضيفه إلى الشاشة الرئيسية. ضع اسم موقعك هناك.
لا يأتي القالب بملف robots.txt ولا بخريطة موقع. أضف src/app/robots.ts وsrc/app/sitemap.ts إذا أردتهما.

اضبط عنوان موقعك

المؤشر المخصص

على الشاشات التي يبلغ عرضها 768 بكسل أو أكثر، تخفي الصفحة مؤشر النظام وترسم نقطتها وحلقتها الخاصتين، من src/components/FloatingCursor/. للإبقاء على المؤشر العادي، احذف <FloatingCursor /> من src/app/[locale]/layout.tsx وقواعد cursor: none قرب أعلى src/styles/globals.css.