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

شغّل الموقع بالأمر yarn dev أثناء التعديل: تُعاد تحميل الصفحة في كل مرة تحفظ فيها. كل المسارات أدناه نسبية إلى المجلد landing-page-template-2.

الإعدادان

من دون Docker، ضعهما في .env.local (انسخ .env.example). مع Docker، مرّرهما كوسيطَي بناء: بناء الصورة لا يقرأ ملفات .env أو .env.local.

NEXT_PUBLIC_SITE_URL=https://www.your-domain.com

docker build -t saas-landing --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .

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

name في src/config/site.ts هو اسم العلامة التجارية. الشعار في الترويسة والتذييل هو حرفه الأول داخل مربع ملوّن، يليه الاسم، ويرسمه src/components/Logo.tsx. والنصوص التي تحتوي على {brand} في ملفات الرسائل تستخدمه أيضًا.

name: "SaasPro",

والقيمة نفسها تملأ عنوان الصفحة، وبطاقة المشاركة على الشبكات الاجتماعية، وقائمة «الموارد»، وبيان تطبيق الويب الذي يبنيه src/app/manifest.ts بألوان الصفحة الداكنة. تغيّر الاسم في مكان واحد فقط.

وcreator في الملف نفسه هو المؤلف المذكور في البيانات الوصفية للصفحة. غيّره أيضًا.

النصوص

كل كلمة ظاهرة، وكل وصف صورة، وعنوان الصفحة موجودة في messages/en.json وmessages/ar.json. لكل قسم كتلته الخاصة التي تحمل اسمه: Header وHero وSocialProof وFeatures وHowItWorks وTestimonials وPricing وComparison وIntegrations وFaq وBlog وCta وNewsletter وFooter.

• غيّر القيمة، وأبقِ المفتاح كما هو، وغيّرها في الملفين. المفتاح المفقود من أحد الملفين يظهر كخطأ رسالة مفقودة في صفحة تلك اللغة.
• الكلمات بين الأقواس المعقوصة، مثل {brand} و{year}، يملؤها التطبيق. أبقِها كما هي.
• في HowItWorks.title، تُرسم الكلمات الواقعة بين <highlight> و</highlight> بلون متدرّج. أبقِ الوسمين.

• اللغات

الصور

أسهل تغيير هو استبدال ملف بملف خاص بك بالاسم نفسه. للملف الجديد، ضعه في public/ واستخدم مساره من جذر الموقع، مثل /images/your-photo.jpg.

لا تُحمَّل صورة من موقع آخر إلا إذا كان مضيفها مدرجًا تحت images.remotePatterns في next.config.js. المضيف المدرج الوحيد هو images.unsplash.com. أضف مضيفك هناك، أو انسخ الملفات إلى public/.

remotePatterns: [
  { protocol: "https", hostname: "images.unsplash.com" },
  { protocol: "https", hostname: "cdn.your-domain.com" },
],

الأسعار والخطط

الأسعار موجودة في مكانين، مكان لكل قسم. غيّر الاثنين حتى يتطابقا:

تُدرج مزايا الخطة بمعرّفاتها في featureIds، ويحتاج كل معرّف إلى نصه تحت الخطة في ملفَّي الرسائل. القيمة popular: true تَسِم الخطة بشارة «الأكثر شعبية».

الأسعار شهرية، بالدولار الأمريكي، ويُنسّقها src/hooks/usePriceFormatter.ts بحسب لغة الصفحة. لعرض عملة أخرى، غيّر قيمتها الافتراضية currency = "USD" إلى رمز عملتك، مثل "EUR".

الألوان

• الألوان المميزة: أصناف Tailwind البنفسجية والوردية (purple-* وpink-*) في المكونات، مثل from-purple-600 to-pink-500 على الأزرار والشعار. ابحث في المجلد src عن purple- وpink- لتغييرها كلها.
• خلفية الصفحة: bg-gray-950 على العنصر الخارجي للصفحة في src/app/[locale]/page.tsx. وتستخدم الأقسام أصناف gray-* فوقها.
• الزر وحقل الإدخال المشتركان: متغيرات CSS في src/styles/globals.css، مثل --primary و--ring. الكتلة .dark هي المستخدمة.

الصفحة داكنة دائمًا: يضبط src/app/[locale]/layout.tsx الصنف dark ويشغّل مزوّد السمة مع defaultTheme="dark". لا توجد سمة فاتحة ولا مبدّل للسمة.

الخطوط

يحمّل src/lib/fonts.ts خط Inter للإنجليزية وخط Noto Sans Arabic للعربية من Google Fonts، عبر next/font. تُنزَّل الخطوط عند بناء الموقع ثم يقدّمها الموقع بنفسه. ويختار src/app/[locale]/layout.tsx الخط بحسب اللغة.

import { Inter, Noto_Sans_Arabic } from "next/font/google";

export const inter = Inter({ subsets: ["latin"] });
export const notoSansArabic = Noto_Sans_Arabic({ subsets: ["arabic"] });

لاستخدام خط آخر من Google Fonts، استورده من next/font/google بدلًا من أحد هذين الخطين وأبقِ الاسم المُصدَّر، أو غيّر الاسم حيث يستخدمه layout.tsx.

الأقسام

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

<Header />
<Hero />
<SocialProof />
<Features />
<HowItWorks />
<Testimonials />
<Pricing />
<ComparisonTable />
<Integrations />
<Faq />
<BlogPreview />
<Cta />
<Footer />

تربط الترويسة بالأقسام عبر معرّفاتها، مثل #pricing و#testimonials. إذا حذفت قسمًا، فاحذف رابطه أيضًا.

لإضافة قسم:

1. أنشئ src/features/home/<Section>/ مع ملف index.tsx، ومجلدَي components/ وconstants/ كما في الأقسام الأخرى.
2. أضف نصوصه تحت مفتاح جديد في ملفَّي الرسائل واقرأها باستخدام useTranslations.
3. صدّره من src/features/home/index.ts وضعه في src/app/[locale]/page.tsx.

قسم النشرة البريدية

يأتي مع القالب قسم للنشرة البريدية فيه نموذج للبريد الإلكتروني، في src/features/home/Newsletter/، لكنه ليس على الصفحة. لإظهاره، استورده مع الأقسام الأخرى وضعه في مكانه، مثلًا قبل قسم الدعوة إلى الإجراء:

import {
  …
  BlogPreview,
  Newsletter,
  Cta,
} from "@/features/home";

<BlogPreview />
<Newsletter />
<Cta />

يحتاج النموذج إلى واجهة API خاصة بك. اضبط NEXT_PUBLIC_API_BASE_URL على عنوانها؛ يرسل النموذج { "email": "…" } بصيغة JSON في طلب POST إلى <NEXT_PUBLIC_API_BASE_URL>/newsletter/subscribe، مباشرة من متصفح الزائر.

• الاستجابة 2xx تعرض رسالة النجاح وتفرغ النموذج.
• أي استجابة أخرى، أو خطأ في الشبكة، أو قيمة فارغة لـ NEXT_PUBLIC_API_BASE_URL تعرض رسالة الخطأ. لا يُرسَل شيء ما دام المتغير فارغًا.
• لأن المتصفح هو من يرسل الطلب، يجب أن تسمح واجهة API الخاصة بك بعنوان موقعك في إعدادات CORS.

النصوص موجودة تحت Newsletter في ملفات الرسائل.

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

تشير معظم الروابط في القالب إلى # حتى تعطيها وجهة:

أزرار «ابدأ الآن» و«ابدأ تجربة مجانية» و«احجز عرضًا توضيحيًا»، والأزرار في بطاقات الأسعار، أزرار عادية بلا وجهة. لتحويل أحدها إلى رابط، أعطِ Button الخاصية asChild وضع Link داخله، كما يفعل src/components/LocaleSwitcher.tsx:

import { Link } from "@/i18n/navigation";

<Button asChild className="…">
  <Link href="/signup">{common("getStarted")}</Link>
</Button>

يحافظ Link القادم من @/i18n/navigation على لغة الزائر في العنوان. لموقع آخر، استخدم <a href="https://…"> عاديًا بدلًا منه.

التواريخ وسنة حقوق النشر

• سنة حقوق النشر في التذييل هي سنة بناء الموقع، وتأتي من COPYRIGHT_YEAR في src/layouts/Footer/constants/footer.ts. أعد البناء في السنة الجديدة لتحديثها.
• تاريخ كل بطاقة مدونة ومدة قراءتها هما publishedAt وreadMinutes في src/features/home/BlogPreview/constants/articles.ts؛ أما عنوانها وملخصها فتحت Blog في ملفات الرسائل.

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

• عنوان الصفحة ووصفها هما Metadata.title وMetadata.description في كل ملف رسائل، فلكل لغة عنوانها ووصفها.
• يعطي NEXT_PUBLIC_SITE_URL كل صفحة عنوانها الأساسي (/en أو /ar) والروابط بين اللغتين. اضبطه على نطاقك قبل البناء للإنتاج، وإلا ستشير محركات البحث والبطاقات الاجتماعية إلى localhost.
• تستخدم بطاقة المشاركة الاجتماعية public/image.png (1200 في 630) مع العنوان والوصف نفسيهما.
• لا يأتي القالب مع sitemap.xml ولا robots.txt.