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

غيّر النصوص والصور والألوان والخطوط والأقسام والروابط وإعدادات البحث، ملفًا ملفًا.

أين يوجد كل شيء

العنصر	المكان
النصوص، باللغتين	`messages/en.json` و`messages/ar.json`
الأرقام والأسعار والصور والشعارات	مجلد `constants/` الخاص بكل قسم، داخل `src/features/home/`
اسم العلامة التجارية والشعار	`brand.name` في ملفي الرسائل، و`src/components/Logo.tsx`
الألوان	أصناف Tailwind في المكونات، ورموز السمة في `src/app/globals.css`
الخطوط	`src/app/[locale]/layout.tsx`
الأقسام وترتيبها	`src/app/[locale]/page.tsx`
الترويسة والتذييل	`src/layouts/Header/` و`src/layouts/Footer/`
العنوان والوصف وصورة المشاركة	`metadata` في ملفي الرسائل، و`public/image.png`

أثناء تشغيل yarn dev، يظهر كل حفظ على الصفحة فورًا. مع Docker، أعد بناء الصورة لترى أي تغيير.

النصوص

كل كلمة في الصفحة موجودة في messages/en.json وmessages/ar.json، مجمّعة حسب القسم: hero وsocialProof وhowItWorks وfeatures وintegrations وtestimonials وblog وpricing وfaq وcta، إضافة إلى header وfooter وmetadata. غيّر القيمة، واحتفظ بالمفتاح، وغيّرها في الملفين.

الكلمات بين الأقواس المعقوصة، مثل {brand} أو {year} أو {count}، تملؤها الشيفرة: اتركها كما هي. وفي سطر trustedBy في القسم الرئيسي، احتفظ أيضًا بالوسوم المحيطة بـ {count}.

بعض الأرقام موجودة في الشيفرة، لا في ملفات الرسائل:

العنصر	الملف
الأرقام الأربعة تحت الشعارات (`10k+` و`500+` و`99.9%` و`24/7`)	`src/features/home/SocialProof/constants/socialProof.constants.ts`
عدد العملاء والتقييم في القسم الرئيسي	`src/features/home/Hero/constants/hero.constants.ts`
أسعار الخطط، الشهرية والسنوية	`src/features/home/Pricing/constants/plans.constants.ts`
تواريخ بطاقات المدونة ومدد القراءة والفئات	`src/features/home/BlogPreview/constants/articles.constants.ts`
أسئلة الأسئلة الشائعة الظاهرة وترتيبها	`src/features/home/Faq/constants/faq.constants.ts`

كل معرّف في الأسئلة الشائعة يحتاج إلى question وanswer تحت faq.items في ملفي الرسائل. تُعرض الأسعار بالدولار، عبر pricing.price في ملفات الرسائل.

اسم العلامة التجارية والشعار

brand.name في ملفي الرسائل هو المكان الوحيد لتغيير اسم العلامة التجارية. إنه الاسم بجوار الشعار في الترويسة والتذييل، ويعرض رمز الشعار حرفه الأول. وكل نص يذكر العلامة التجارية يكتب {brand} ويأخذ هذه القيمة: عنوان الصفحة، ووصف صورة المشاركة، وشارة القسم الرئيسي، وشهادتان من آراء العملاء، ورسالة الختام، وسطر حقوق النشر.

واسم التطبيق المثبّت يتبعه أيضًا: يقرأ src/app/manifest.ts قيمة brand.name من رسائل اللغة الإنجليزية.

يُرسم رمز الشعار في src/components/Logo.tsx: مربع مائل بتدرّج من الأحمر إلى الكهرماني. استبدله بملف SVG خاص بك، أو بصورة من public/، لاستخدام شعارك.

أيقونات المتصفح والهاتف هي public/favicon.svg وpublic/favicon.ico وpublic/favicon-96x96.png وpublic/apple-touch-icon.png والملفان public/web-app-manifest-*.png. استبدلها بملفات بالأسماء والمقاسات نفسها. أما ملف manifest نفسه فهو src/app/manifest.ts.

الصور والشعارات

القسم	الصور	تُضبط في
القسم الرئيسي	`public/images/hero.webp`، بمقاس 600 x 400	`src/features/home/Hero/constants/hero.constants.ts`
كيف يعمل	من `public/images/HowItWorks/step1.webp` إلى `step4.webp`	`src/features/home/HowItWorks/constants/steps.constants.ts`
المزايا	`public/images/hero1.webp` وثلاث صور من Unsplash	`src/features/home/Features/constants/features.constants.ts`
آراء العملاء	ثلاث صور شخصية من Unsplash	`src/features/home/Testimonials/constants/testimonials.constants.ts`
معاينة المدونة	ثلاث صور من Unsplash	`src/features/home/BlogPreview/constants/articles.constants.ts`
الإثبات الاجتماعي	`public/images/logos/slack.svg` وشعارات من Simple Icons	`src/features/home/SocialProof/constants/socialProof.constants.ts`
التكاملات	`public/images/logos/slack.svg` و`salesforce.svg` وشعارات من Simple Icons	`src/features/home/Integrations/constants/integrations.constants.ts`

لاستخدام صورتك، ضعها في public/images/ واكتب مسارها، بدءًا من /images/، في ملف الثوابت الخاص بالقسم. والصورة من موقع آخر تحتاج إلى إضافة مضيفها في images.remotePatterns داخل next.config.mjs؛ وإلا يرفض Next.js تحميلها. المضيفان images.unsplash.com وcdn.simpleicons.org مضافان بالفعل.

صور Unsplash وشعارات Simple Icons عيّنات. استبدلها بملفاتك في public/images/ قبل النشر.

الألوان

لون التمييز تدرّج من الأحمر إلى الكهرماني، مكتوب بصنفي Tailwind from-red-500 وto-amber-500، مع درجات أخرى من red-* وamber-* للحدود والتوهجات والأيقونات. لتغييره، ابحث في src/ عن red- وamber- واستبدلها بألوانك. ابدأ بـ src/components/GradientButton.tsx، الذي تستخدمه كل الأزرار المتدرجة.

الصفحة مصممة بالوضع الداكن: الخلفية سوداء (bg-black في src/app/[locale]/layout.tsx وsrc/app/[locale]/page.tsx)، ويبدأ next-themes بالوضع الداكن. ورموز السمة في src/app/globals.css وtailwind.config.ts تلوّن الأجزاء المشتركة في src/components/ui/.

الخطوط

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

الأقسام وترتيبها

يسرد src/app/[locale]/page.tsx الأقسام بترتيب ظهورها: Hero وSocialProof وHowItWorks وFeatures وIntegrations وTestimonials وBlogPreview وPricing وFaq وCta. انقل سطرًا لنقل قسم، أو احذفه لإزالة القسم.

كل قسم مجلد داخل src/features/home/، وفيه components/ وconstants/ وhooks/ وtypes/. لإضافة قسم، انسخ هذا التنظيم، وأضف نصوصه إلى ملفي الرسائل، وضعه في page.tsx.

ينتقل رابطا الأسعار وآراء العملاء في الترويسة إلى القسمين ذوي المعرّفين pricing وtestimonials، وتنتقل روابط التواصل إلى دعوة الختام، ومعرّفها contact. احتفظ بهذه المعرّفات ما دامت الروابط تشير إليها.

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

الروابط التجريبية لا تقود إلى أي مكان بعد. اضبطها قبل النشر:

الروابط	الملف	حاليًا
قوائم الترويسة (المنتجات، الحلول)	`src/layouts/Header/hooks/useNavItems.ts`	`#`
روابط الترويسة (الأسعار، آراء العملاء)	`src/layouts/Header/constants/nav.constants.ts`	`#pricing`, `#testimonials`
مجموعات روابط التذييل، ومنها رابط التواصل	`src/layouts/Footer/components/FooterNav.tsx`	`#`
الروابط القانونية	`src/layouts/Footer/components/FooterLegal.tsx`	`#`
أيقونات الشبكات الاجتماعية	`src/layouts/Footer/constants/footer.constants.ts`	`#`

روابط التواصل تحت الأسئلة الشائعة والتكاملات تعمل بالفعل: فهي تنتقل إلى دعوة الختام.

الأزرار (تسجيل الدخول، ابدأ الآن، ابدأ تجربتك المجانية، شاهد العرض التوضيحي، أزرار الخطط، اقرأ المزيد، عرض جميع المقالات) أزرار عادية بلا وجهة. لتحويل أحدها إلى رابط، أعطه asChild وضع رابطًا داخله، مع نصه وأيقونته:

TypeScript

<GradientButton asChild className="h-10 sm:h-12 px-6 sm:px-8">
  <a href="https://app.your-domain.com/signup">{t("primaryCta")}</a>
</GradientButton>

البحث والمشاركة

عنوان الصفحة ووصفها: metadata.title وmetadata.description في ملفي الرسائل. ويصف metadata.imageAlt صورة المشاركة.
صورة المشاركة: public/image.png، بمقاس 1200 x 630 بكسل.
الرابط الأساسي وروابط اللغات البديلة: تُبنى من NEXT_PUBLIC_SITE_URL، الذي تضبطه عند النشر.
يضبط src/app/[locale]/layout.tsx أيضًا وسم generator يذكر اسم مؤلف القالب. غيّره أو احذفه من هناك.
لا يأتي القالب بملف robots.txt ولا بخريطة موقع. أضف src/app/robots.ts وsrc/app/sitemap.ts إن أردتهما.

اضبط عنوانك